Feat/table

[BLuEScioN]

What type of PR is this? (check all applicable)

• Refactor
• Feature
• Bug Fix
• Optimization
• Documentation Update

Description

Adds the table component for our design system.
This PR will be followed by PRs for the additions to the table component:

• Pagination
• Tx table
• Block table with its unique implementation for handling grouping

NB: I included a TxsTable component as I was writing that to sanity check my implementation worked and I was using it in the table storybook. None of this is going to be shown anyway so I'd prefer to just leave that component in this PR, as I will be using it pretty soon in a follow up PR for the txs page

To check the table implementation, please check out the storybook deployment link. There are a lot of table configurations available in the storybook control panel

Issue ticket number and link

#1995
#1996
#1998

Checklist:

• I have performed a self-review of my code.
• I have tested the change on desktop and mobile.
• I have added thorough tests where applicable.
• I've added analytics and error logging where applicable.

Screenshots (if appropriate):

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
explorer-storybook	❌ Failed (Inspect)			Mar 4, 2025 9:05pm
hiro-explorer	❌ Failed (Inspect)			Mar 4, 2025 9:05pm

[codecov]

Codecov Report

Attention: Patch coverage is 0.24876% with 401 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ents/table/table-examples/TxTableCellRenderers.tsx	0.00%	99 Missing and 5 partials ⚠️
...ommon/components/table/table-examples/TxsTable.tsx	0.00%	80 Missing and 10 partials ⚠️
src/common/components/table/Table.tsx	0.00%	69 Missing and 11 partials ⚠️
src/stories/Table.stories.tsx	0.00%	32 Missing and 2 partials ⚠️
...n/components/table/TableScrollIndicatorWrapper.tsx	0.00%	26 Missing and 2 partials ⚠️
src/stories/table-utils/tx-table-data.tsx	0.00%	21 Missing and 2 partials ⚠️
src/common/components/table/TableSkeleton.tsx	0.00%	14 Missing ⚠️
src/stories/table-utils/simple-table-utils.tsx	0.00%	12 Missing ⚠️
src/common/utils/utils.ts	8.33%	10 Missing and 1 partial ⚠️
src/common/components/table/TableContainer.tsx	0.00%	3 Missing ⚠️
... and 2 more

📢 Thoughts on this report? Let us know!

[andresgalante]

Thanks for putting this together, Nick!

In my experience, large monolithic components like this table can be tough to maintain and not flexible enough to accommodate future changes. I’d suggest breaking this down into smaller, composable parts for the different variations of filters or rows. That would make it easier to extend and also much simpler to review.

[BLuEScioN]

Thanks for putting this together, Nick!

In my experience, large monolithic components like this table can be tough to maintain and not flexible enough to accommodate future changes. I’d suggest breaking this down into smaller, composable parts for the different variations of filters or rows. That would make it easier to extend and also much simpler to review.

Hey Andy, thanks for the review. Can you please be more specific about which parts of the table is monolithic in nature? I agree that the table implementation should be as composable and flexible as possible to support multiple table variations, and this is what I set out to do in this PR.

In this PR, I have not implemented any table filters yet. From the way that I am thinking about the table so far, I don't think that any table filter logic added here on out would need to be part of the core table code.

The implementation of the row rendering logic is not contained inside the table. The table accepts a column defintion array in which table consumers specify what their columns look like, inlcuding a cellrenderer function, which tells the table how to render the cells in the column. In the table examples directory, you can see src/common/components/table/table-examples/TxTableCellRenderers.tsx. That file shows that all the logic required to rendering a particular tables rows/columns is independent from the underlying table code.

[ginny-d]

@BLuEScioN I added my comments on Storybook
Let me know if you have any questions

Two things I didn't revise because I didn't know if they were ready for review:

• Empty states

• Dynamic/responsiveness for smaller viewports

[BLuEScioN]

@BLuEScioN I added my comments on Storybook Let me know if you have any questions

Two things I didn't revise because I didn't know if they were ready for review:

• Empty states

* [Dynamic/responsiveness for smaller viewports](https://www.figma.com/design/zR7MN402tgacWXm63OQLms/Stacks-Explorer-Design-System-%5BRedesign%5D?node-id=2626-10958&t=y2zwp8rAZp2J9tu4-1)

I did implement the empty state. As we discussed, we are not adding the ripple styles that you have in figma. Note that I did change the text that you had from "This account has no transactions yet." to "No results found". I did this because "This account has no transactions yet." might only apply to account pages, where as "No results found" is more general. The text is configurable in the code.

Yes the responsive styles are ready to review, for the table. This PR is only trying to implement the table designs. The only reason that I have the tx table 90% implemented is because I needed to see if the table was capable of working for our intended use cases. It would be best to use the simple table to provide feedback for this PR

[ginny-d]

@BLuEScioN I added my comments on Storybook Let me know if you have any questions
Two things I didn't revise because I didn't know if they were ready for review:

• Empty states

* [Dynamic/responsiveness for smaller viewports](https://www.figma.com/design/zR7MN402tgacWXm63OQLms/Stacks-Explorer-Design-System-%5BRedesign%5D?node-id=2626-10958&t=y2zwp8rAZp2J9tu4-1)

I did implement the empty state. As we discussed, we are not adding the ripple styles that you have in figma. Note that I did change the text that you had from "This account has no transactions yet." to "No results found". I did this because "This account has no transactions yet." might only apply to account pages, where as "No results found" is more general. The text is configurable in the code.

Yes the responsive styles are ready to review, for the table. This PR is only trying to implement the table designs. The only reason that I have the tx table 90% implemented is because I needed to see if the table was capable of working for our intended use cases. It would be best to use the simple table to provide feedback for this PR

Empty state:

• Got it. My comment was based on the 'No results found' preview looking different from the design. I wasn’t sure why some elements were missing since I don’t have the full context.

Responsiveness:
Understood, thanks for providing additional context.

@andresgalante Since these PRs share the same name as the designs and reference them, it might be helpful to note in the PRs what is not included or will be addressed later. This way, I can avoid annotating missing elements unnecessarily.

[ginny-d]

Approving and noting here what's not included in this PR for future reference:

• First item (first column) of a table should be a link/clickable
• Let's move the contract tag to the "To" column to avoid undesired column wrapping. In practice, this "human readable" contract name would replace the Contract ID (but it would still link to it). See styling here, which is the same as the timestamp tag style, only underlined because it's a link
• Adjust the table container top padding from 12px to 2px so the spacing for the header row is more balanced
• IDs and alphanumeric truncations should use a standard 4 characters at the front and 5 characters at the end
• The timestamp style is different. See Figma link
• Empty states styling
• "New transactions added" banner is lacking hover state
• Adding Tenure reasons (block found, tenure change, tenure extension) to Tenure tx in their title
• Column sorting action should be triggered by hovering on the full label, as opposed to only the icon
• Table optimisation for smaller viewports