Components
Foundations
Feedback
Data Table
Scrollable data table with sticky left columns and row borders. Use DataTableScrollArea, DataTableRoot, StickyTableHead, and StickyTableCell for consistent layout and no content leakage when scrolling.
Installation
Install this component via the shadcn CLI.
npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/data-table.jsonOr install the theme first: npx shadcn@latest add https://baby-baltazar-xi.vercel.app/r/sthlm-theme.json
Preview
Interactive component demo.
| File name | Status | Details | Amount | |
|---|---|---|---|---|
| Example_File_2024.pdf | Complete | Statement | $1,234.00 | |
| Report_Q1.xlsx | Complete | Summary | $567.00 |
Usage
How to use this component in your code.
<DataTableScrollArea>
<DataTableRoot>
<TableHeader>
<TableRow>
<StickyTableHead stickyLeft={0} widthClass="w-16" extendBackground contentFit>...</StickyTableHead>
<StickyTableHead stickyLeft={64} widthClass="w-[180px]" extendBackground>File name</StickyTableHead>
<StickyTableHead stickyLeft={244} widthClass="w-[100px]" extendBackground={false} edgeShadow className="bg-background">Status</StickyTableHead>
<TableHead>Details</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<StickyTableCell stickyLeft={0} widthClass="w-16" extendBackground fullWidthContent={false}>...</StickyTableCell>
<StickyTableCell stickyLeft={64} widthClass="w-[180px]" extendBackground>...</StickyTableCell>
<StickyTableCell stickyLeft={244} widthClass="w-[100px]" extendBackground={false} edgeShadow className="bg-background">...</StickyTableCell>
<TableCell>...</TableCell>
</TableRow>
</TableBody>
</DataTableRoot>
</DataTableScrollArea>