components
TableV2
v.1.0.0 | SaturnUsage
import { TableV2, TableCaption, TableHead, TableBody, TableFoot, TableRow, TableCell } from '@kubit-ui-web/react-components'
12345678910
<TableV2 variant="DEFAULT"> <TableCaption variant="DEFAULT">Caption Example</TableCaption> <TableHead variant="DEFAULT"> <TableRow hoverable={false} variant="HEADER_ROW_DEFAULT"> <TableCell hidden th variant="HEADER_CELL_DEFAULT"> Header Cell 1 </TableCell> <TableCell th variant="HEADER_CELL_DEFAULT"> Header Cell 2 </TableCell>
Props
Let's delve into the versatility of the tableV2 component by examining all its avalaible props.
| Property | Type | Default | Description |
|---|---|---|---|
| variant | string | - | Current variant of TableV2 |
| autoRightStickyCalc | boolean | true | When true, the table will calc the sticky right position for those cells marked as sticky right |
| autoLeftStickyCalc | boolean | true | When true, the table will calc the sticky left position for those cells marked as sticky left |
| aria-label | string | - | Only when it has scroll, scrollable container aria label |
| aria-labelledby | string | - | Only when it has scroll, scrollable container aria labelled by |
| hasScrollDisabled | boolean | false | Disable scroll in the scrollable container |
| disableShadowEffects | boolean | false | When true, position table will be sticky |
| sticky | boolean | false | Disable shadow effects |
| component | string or React.ComponentType<any> | table | HTML component to render |
| dataTestId | string | table | Id for testing |
| ctv | string | - | Modify styles for the component |