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.


React.ReactNodeThe center section of the table. Can be used to render custom content in this area.-
'default' | 'reduced'The available table modes:
  • default: Default table size.
  • reduced: More compact table with less spacing for high density information.
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.-


A compound component aimed to be used inside the table 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

Actions cell