TableResource

TableResource

The TableResource component is a generic, reusable table for displaying paginated data with optional loading, error, and empty states. It supports custom column rendering and integrates with Carbon's DataTable and Pagination components.

Props

Name	Type	Required	Description
id	string	✅	The table ID. Used as unique identifier and for customization persistence.
headers	TableHeaderType<T>[]	✅	Array of column definitions, including custom renderers and selection flags
content	PageableResponse<T>	✅	Paginated data to display in the table
loading	boolean	✅	Whether the table is in a loading state
error	boolean	✅	Whether an error occurred while fetching data
displayRange	boolean	❌	If true, shows the item range in the pagination component
displayToolbar	boolean	❌	If true, shows the toolbar, with the toolbar buttons, such as column customization
onPageChange	(params: { page: number; pageSize: number }) => void	❌	Callback for handling page changes
onSortChange	(sortKeys: SortingKeys<T>) => void	❌	Callback for handling column sort changes
onRowExpanded	(rowId: string or number) => Promise<ReactNode>	❌	Callback for handling row expansion data loading. If declared it will show row expansion.

Usage

import TableResource from '@/components/Form/TableResource';

<TableResource
  id="persons-table"
  headers={headers}
  content={content}
  loading={loading}
  error={error}
  displayRange
  displayToolbar
  onPageChange={handlePageChange}
  onSortChange={handleSortChange}
/>