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 with its unique cell renders
• Block table with its unique implementation for handling grouping

Why accessor and cellrenderer:

• accessor is more flexible, allowing complex transformations (like row => ${row.firstName} ${row.lastName})
• Having both gives you the choice between simple property access and complex data transformations2.
• id is a unique string identifier for the column
• columnId is a numeric index, useful for maintaining column order and optimizing rendering - This separation allows for both human-readable identifiers and efficient internal operations.
• cellRenderer handles the visual presentation of the data - Decouples data transformation (accessor) from presentation logic - Enables custom components, formatting, or interactive elements within cells
• Why have an accessor vs just using the cellrender?
• Accessor:
• Handles data transformation/extraction
• Returns the raw data value
• Used for sorting operations
• Can be reused across different cell renderers
• Keeps business logic separate from presentation
• CellRenderer:
• Handles only the presentation/UI
• Takes the processed data from accessor and renders it
• Can include formatting, styling, and interactive elements
• Focuses purely on how to display the data

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	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 17, 2025 1:16am
hiro-explorer	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Feb 17, 2025 1:16am

[codecov]

Codecov Report

Attention: Patch coverage is 0% with 379 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
...ents/table/table-examples/TxTableCellRenderers.tsx	0.00%	90 Missing and 2 partials ⚠️
src/common/components/table/Table.tsx	0.00%	63 Missing and 8 partials ⚠️
...ommon/components/table/table-examples/TxsTable.tsx	0.00%	51 Missing and 5 partials ⚠️
src/stories/table-utils/simple-table-utils.tsx	0.00%	38 Missing ⚠️
src/stories/Table.stories.tsx	0.00%	31 Missing and 1 partial ⚠️
...n/components/table/TableScrollIndicatorWrapper.tsx	0.00%	26 Missing and 2 partials ⚠️
...mponents/table/table-examples/ActivePoolsTable.tsx	0.00%	21 Missing ⚠️
src/common/components/table/TableSkeleton.tsx	0.00%	15 Missing ⚠️
src/common/components/table/TableContainer.tsx	0.00%	14 Missing ⚠️
src/stories/table-utils/tx-table-data.tsx	0.00%	10 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.