TableContainer

Scroll wrapper for Table. Extends View and adds overflow-x: auto, so wide tables scroll horizontally inside it instead of breaking the page layout.

Source

Scroll wrapper for Table. Extends View and adds overflow-x: auto, so wide tables scroll horizontally inside it instead of breaking the page layout. Give it a bounded maxHeight to make Table's hasStickyHeader stick.

<TableContainer maxHeight="320px">
  <Table hasStickyHeader>...</Table>
</TableContainer>

Demos

For usage examples, visit the component demo page: Table

Import

import { TableContainer } from '@soroush.tech/design-system/Table'

Props

Accepts every View prop - bg, borderColor, borderWidth, borderRadius, spacing, layout, position, and as (default 'div'). See @soroush.tech/design-system/View/README.md.

Source code

If this page does not answer your question, have a look at the implementation of the component for more detail.