Resultset Table

Data table is a component with a high rate of usage within the applications. It allows to show the user a big amount of information in a simple and simplified way. All the information contained in the table has a grid structure, defining columns and rows to place the data and allow the users to scan, analyze, compare and filter that information.


{ displayValue: React.ReactNode; isSortable?: boolean; }[]An array of objects representing the columns of the table. Each object has the following properties:
  • displayValue: Column display value.
  • isSortable: Boolean value to indicate whether the column is sortable or not.
{ displayValue: React.ReactNode; sortValue?: string; }[]An array of objects representing the rows of the table, you will have as many objects as columns in the table. Each object has the following properties:
  • displayValue: Value to be displayed in the cell.
  • sortValue: Value to be used when sorting the table by that column. If not indicated displayValue will be used for sorting.
'default' | 'reduced'The available table modes:
  • default: Default table size.
  • reduced: More compact table with less spacing for high density information.
booleanIf true, paginator will not be displayed.false
showGoToPagebooleanIf true, a select component for navigation between pages will be displayed.true
itemsPerPagenumberNumber of items per page.5
itemsPerPageOptionsnumber[]An array of numbers representing the items per page options.-
itemsPerPageFunction(value: number) => voidThis function will be called when the user selects an item per page option. The value selected will be passed as a parameter.-
margin'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | MarginSize of the margin to be applied to the component. You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.-
tabIndexnumberValue of the tabindex attribute applied to the sortable icon.0


A compound component aimed to be used inside the resultset table's displayValue to display up to three actions.


{ icon: string | SVG; title: string; onClick: () => void; disabled?: boolean; tabIndex?: number; }[] | { title: string; onClick: (value?: string) => void; disabled?: boolean; tabIndex?: number; options: Option[]; }[]

It represents a list of interactuable elements that will work as buttons or as a dropdown. Those with an icon from Material Symbols or a SVG are treated as buttons. If any element lacks an icon and includes options, it is interpreted as a dropdown. Only the first action with options will be displayed and only up to 3 actions. In the case of the dropdown the click function will pass the value assigned to the option, click here for more details.



Basic usage

Reduced usage


No paginator