A table provides a way to organize data in a grid format. Tables are used to display data-centric information and can contain actions, such as buttons or links.
The Table component is a controlled component that can be used to display tabular data. It can be used in a group with other tables to allow for multiple selections.
The Table.Root component supports different sizes for its cells. You can set the size of the table using the size prop. The available sizes are sm, md, and lg. The default size is md.
The Table.Root component supports different decorations for its rows. You can set the decoration of the table using the decoration prop. The available decorations are default and zebra.
The Table.Root component supports a sticky prop, which makes the table header sticky. This is useful for long tables where you want to keep the header visible while scrolling.
The Table.HeaderCol component supports a Table.Trigger, which renders a button element. This allows you to create clickable headers for sorting or other actions.
Input fields in table cells should include labels. The labels can be hidden, but they should be present in the DOM for screen readers to read. This is important for users who rely on screen readers to understand the context of the input field.