Table

Tables allow to organize and display big data sets efficiently.

React

Is new design vision part implemented using new tokens?

Update required

Resouces

Storybook

React guidance

Source

GitHub code

This table is a wrapper over TansStackTable for React, please read this documentation to understand how to define columns and data

Use of Links in Table cells

Link component styles have been slightly modified when used inside Table component:

Links do not show underline in normal state

All links show underline when the row is hovered

Links do not show underline on hover

It's recommended to use the basic variant in all cases*

It's recommended to use the Link in standalone mode if all cell content is the link*

*Product designers could propose some exceptions or edge cases to fulfil some product needs, so all variants and component modes (inline/standalone) are available.

Storybook failed to load. Please connect to the VPN to access.

Basic usage
Advanced usage


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import {
                                                                                                                                                            Button,
                                                                                                                                                            Table,
                                                                                                                                                            useRowSelection,
                                                                                                                                                            useTableState
                                                                                                                                                        } from '@optimus-web/core';
                                                                                                                                                        
                                                                                                                                                        const MyComponent = () => {
                                                                                                                                                          const [tableState, setTableState] = useTableState<MyType>();
                                                                                                                                                        
                                                                                                                                                          // fetch data and API logic
                                                                                                                                                          
                                                                                                                                                          return (
                                                                                                                                                            <Table
                                                                                                                                                              uniqueRowId="id"
                                                                                                                                                              amountOfRows={totalRowCount}
                                                                                                                                                              data={data}
                                                                                                                                                              fixedFirstColumn={false}
                                                                                                                                                              fixedHeader={false}
                                                                                                                                                              loading={loading}
                                                                                                                                                              columns={columns}
                                                                                                                                                              state={tableState}
                                                                                                                                                              onStateChange={setTableState}
                                                                                                                                                              emptyState={{
                                                                                                                                                                primaryText: emptyStatePrimaryText,
                                                                                                                                                                secondaryText: emptyStateSecondaryText,
                                                                                                                                                                action: (
                                                                                                                                                                  <Button onClick={handleEmptyStateAction}>
                                                                                                                                                                    Empty state action button
                                                                                                                                                                  </Button>
                                                                                                                                                                )
                                                                                                                                                              }}
                                                                                                                                                            />
                                                                                                                                                          )
                                                                                                                                                        }


                                                                                                                                                        
                                                                                                                                                        
                                                                                                                                                            import {
                                                                                                                                                          Table,
                                                                                                                                                          TableActiveColumnFilters,
                                                                                                                                                          TableBulkActionButton,
                                                                                                                                                          TableBulkActions,
                                                                                                                                                          TableHeader,
                                                                                                                                                          useRowSelection,
                                                                                                                                                          useTableState,
                                                                                                                                                        } from "@optimus-web/core";
                                                                                                                                                        
                                                                                                                                                        const MyComponent = () => {
                                                                                                                                                          const [tableState, setTableState] = useTableState<MyType>();
                                                                                                                                                          const { rowSelection, setRowSelection, selectedRowsCount } =
                                                                                                                                                            useRowSelection();
                                                                                                                                                        
                                                                                                                                                          // fetch data and API logic
                                                                                                                                                        
                                                                                                                                                          return (
                                                                                                                                                            <>
                                                                                                                                                              <TableHeader
                                                                                                                                                                title="Title"
                                                                                                                                                                subTitle="SubTitle"
                                                                                                                                                                state={tableState}
                                                                                                                                                                onStateChange={setTableState}
                                                                                                                                                                onRowSelectionChange={setRowSelection}
                                                                                                                                                                globalSearch
                                                                                                                                                              />
                                                                                                                                                              <Table
                                                                                                                                                                uniqueRowId="id"
                                                                                                                                                                rowSelection={{
                                                                                                                                                                  rowSelection,
                                                                                                                                                                  onRowSelectionChange: setRowSelection,
                                                                                                                                                                  enableRowSelection: (row) => row.original.age > 10,
                                                                                                                                                                }}
                                                                                                                                                                amountOfRows={totalRowCount}
                                                                                                                                                                data={data}
                                                                                                                                                                fixedFirstColumn
                                                                                                                                                                fixedHeader
                                                                                                                                                                loading={loading}
                                                                                                                                                                columns={columns}
                                                                                                                                                                state={tableState}
                                                                                                                                                                onStateChange={setTableState}
                                                                                                                                                                emptyStatePrimaryText={emptyStatePrimaryText}
                                                                                                                                                                emptyStateSecondaryText={emptyStateSecondaryText}
                                                                                                                                                              />
                                                                                                                                                            </>
                                                                                                                                                          );
                                                                                                                                                        };

API

Table

Name	Description	Type	Default
data	Array of elements rendered in the table. In case no data is available, Table component will render the TableEmptyState component.	T[]	-
uniqueRowId	Property name in each table row object whose value is a unique row identifier. Needed internally for row selection purposes.	keyof T	id
loading	Conditionally renders the table loading state.	boolean	-
columns	Column definitions for building the underlying data model. Refer here for more info.	ColumnDef<T, any>[]	-
amountOfRows	Total rows count in the data array. Used internally por pagination functionality.	number	-
fixedFirstColumn?	Makes first column always visible on horizontal scrolling.	boolean	undefined
fixedHeader?	Makes table header always visible on vertical scrolling.	boolean	undefined
state	Defines the initial and current configuration of the data in the table: pagination, sorting and filtering. Usually configured initially through the useTableState hook.	TableState<T, F>	-
onStateChange	Updates the table state object. Usually provided by the useTableState hook.	(state: TableState<T, F>) => void	-
rowSelection?	Enables and defines the configuration of the row selection functionallity. Usually provided by the useRowSelection hook.	RowSelectionObject See	undefined
meta?	Used to pass arbitrary data accessible anywhere.	TableMeta<T>	undefined
emptyState?	Defines the options for configuring the empty state of the table. See EmptyState	EmptyStateProps	undefined

TableHeader

Renders a table header component with an optionals title, subtitle, global search input and an end-right custom content slot.

Name	Description	Type	Default value
globalSearch?	Enables the global search functionality, rendering the input field.	boolean	undefined
title?	Title for the table header	ReactNode	undefined
subTitle?	Subtitle for the table header	ReactNode	undefined
rightSide?	Enables a slot for rendering custom content after the global search input.	ReactNode	undefined
state	Defines the initial and current configuration of the data in the table: pagination, sorting and filtering. Usually configured initially through the useTableState hook.	TableState<T, F>	-
onStateChange	Updates the table state object. Usually provided by the useTableState hook.	(state: TableState<T, F>) => void	-
onRowSelectionChange?	Callback for reset the row selection state on global search input event.	Dispatch<React.SetStateAction<{}>>	undefined

TableActiveColumnFilters

Renders an interactive tag for each active column filter in the table.

Name	Description	Type	Default value
state	Defines the initial and current configuration of the data in the table: pagination, sorting and filtering. Usually configured initially through the useTableState hook.	TableState<T, F>	-
columns	Column definitions for building the underlying data model. Refer here for more info.	ColumnDef<T, any>[]	-
onStateChange	Updates the table state object. Usually provided by the useTableState hook.	(state: TableState<T, F>) => void	-
onRowSelectionChange?	Callback for reset the row selection state on global search input event.	Dispatch<React.SetStateAction<{}>>	undefined

TableBulkActions

Renders an action bar above the table, enabling buttons with custom actions.

Name	Description	Type	Default value
leftSide?	Left slot for custom content	ReactNode	undefined
rightSide?	Right slot for custom content. Usually used for placing one or more TableBulkActionButton	JSX.Element	undefined
disabled?	Defines if the top bar should be in disabled state	boolean	undefined

TableBulkActionButton<Partial<ButtonProps>>

Use this wrapper instead of using directly the Button component to keep consistency between all the TableBulkActions bars across products.

useTableState

Returns an array with the initial table state and the update callback, similar to useState:
const [tableState, setTableState] = useTableState<MyType>(initialState);


                                                        
                                                        
                                                            // default state object returned
                                                        
                                                        {
                                                            pagination: {
                                                                pageIndex: pagination?.pageIndex ?? 0, // default page is 0
                                                                show: pagination?.show ?? true, // pagination is shown by default
                                                                pageSize: pagination?.show !== false ? pagination?.pageSize || PAGINATION_SIZES[25] 
                                                                  : POSITIVE_INFINITY, // if pagination.show is `false` all data items will be rendered
                                                            },
                                                            filters: {} as F,
                                                            globalFilters: {},
                                                            sort: {},
                                                            ...overrides, // custom configurations can be added here
                                                        }

useRowSelection

Use this hook to get the needed properties for enabling the row selection. Returns an object with the following:

Name	Description	Type	Default value
rowSelection	Object defining the selected items	Record<RowId, boolean>	-
setRowSelection	Callback for update the row selection	Dispatch<SetStateAction<RowSelectionState>>	-
selectedRowsIds	Array with selected items	string[]	-
selectedRowsCount	Total count of selected rows	number	-
hasRowsSelected	Defines if any row has been selected	boolean	-
unselectRow	Unselect a particular row	(id: string) => void	-
resetRowSelection	Unselect all rows	() => void	-

useFullRowSelection

Similar to useRowSelection but also returns a new property
selectedRowsData: Map<RowId, RowData>
which contains key value pairs with the row id and the row data.

usePaginatedData

Returns sliced data based on current pagination parameters. Useful for paginate data directly in frontend.

usePaginatedData