Table

Component Status

React

Up to date

Usage


                                                                                                                                            
                                                                                                                                            
                                                                                                                                                import {
                                                                                                                                                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}
                                                                                                                                                  emptyStatePrimaryText={emptyStatePrimaryText}
                                                                                                                                                  emptyStateSecondaryText={emptyStateSecondaryText}
                                                                                                                                                />
                                                                                                                                              )
                                                                                                                                            }
                                                                                                                                            
                                                                                                                                                

 


                                                                                                                                            
                                                                                                                                            
                                                                                                                                                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}
                                                                                                                                                  />
                                                                                                                                                </>
                                                                                                                                              );
                                                                                                                                            };
                                                                                                                                            
                                                                                                                                                

 

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

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

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

 

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

 

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

emptyStatePrimaryText

Primary text rendered on table empty state

ReactNode

-

emptyStateSecondaryText

Secondary text rendered on table empty state

ReactNode

-

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