feat!: option to add row count on tables (#284) #285
Conversation
frano-m
force-pushed
the
fran/415-table-row-count
branch
from
96dcad9 to
b5aae14
Compare
frano-m
changed the title
frano-m
force-pushed
the
fran/415-table-row-count
branch
from
b5aae14 to
e095b94
Compare
NoopDog
changed the title
frano-m
force-pushed
the
fran/415-table-row-count
branch
from
e095b94 to
5c5e3d8
Compare
| }: BaseComponentProps & CellContext<TData, TValue>): JSX.Element => { | ||
| return ( | ||
| <Typography {...TYPOGRAPHY_PROPS} className={className} component="div"> | ||
| {cellContext.row.getRowPosition()} |
There was a problem hiding this comment.
RowPosition is now a custom feature, and we now have getRowPostiion on the cellContext.row.
| @@ -56,8 +58,11 @@ export const Table = <T extends RowData>({ | |||
| const { stickyHeader = false } = table || {}; | |||
| const { sx: tableContainerSx } = tableContainer || {}; | |||
| const tableInstance = useReactTable({ | |||
| _features: [ROW_PREVIEW], | |||
| columns: generateColumnDefinitions(columns), | |||
| _features: [ROW_POSITION, ROW_PREVIEW], | |||
There was a problem hiding this comment.
New custom feature ROW_POSITION.
| import { getRowModel, getRowPosition, initInitialState } from "./utils"; | ||
|
|
||
| export const ROW_POSITION: TableFeature = { | ||
| createCell: <T extends RowData, TValue>( |
There was a problem hiding this comment.
We extend cellContext.row with the function getRowPosition. We will call this function from the RowPositionCell component. The value returned will be the row position.
| createTable: <T extends RowData>(table: Table<T>): void => { | ||
| const originalGetRowModel = table.getRowModel.bind(table); | ||
| table.getRowModel = (): RowModel<T> => { | ||
| return getRowModel(table, originalGetRowModel); |
There was a problem hiding this comment.
We update the getRowModel; each row in the getRowModel.rowsById will be updated to include the getRowPosition function. Doing this in the feature, allows us to efficiently retrieve the getRowPosition function for the given row.
| }; | ||
| }, | ||
| getInitialState: (initialState?: InitialTableState): Partial<TableState> => { | ||
| return initInitialState(initialState); |
There was a problem hiding this comment.
The default initial state will be to hide the row position column.
| ): RowModel<T> { | ||
| const rowModel = getRowModel(); | ||
| rowModel.rows.forEach(({ id }, i) => { | ||
| rowModel.rowsById[id].getRowPosition = (): number => |
There was a problem hiding this comment.
Adding the function getRowPosition onto rowModel.rowsById[id] where rowsById is part of TanStack's rowModel API, which maps each row to its id.
| ...initialState?.columnVisibility, | ||
| }, | ||
| pagination: { | ||
| ...DEFAULT_PAGINATION, |
There was a problem hiding this comment.
Custom feature initial state expects pagination to be defined pageIndex and pageSize. These values are initial state only, and will always be updated by table state as per usual.
frano-m
force-pushed
the
fran/415-table-row-count
branch
from
ff23a9a to
33f370e
Compare
Closes #284.