Shadcn UI Data Table Block
DataTable23 is a left-aligned section featuring a heading, descriptive text, and a data table with grouped rows. Rows are organized under group headers based on employment type: full-time, contract, internship, and part-time. The table displays employee data with columns for name, title, email, and role.
Light background with dark text. The table has a thin border with rounded corners. Group header rows span the full width with a muted background and bold text displaying the category name. Data rows are indented under their group headers. Standard table cell styling with consistent padding. Static layout with no entrance animations.
This is a data table designed for categorized data display. The grouped rows provide visual organization by category without requiring collapsible sections. The most distinctive feature is the inline group headers, making it suitable for employee directories, inventory by category, or any dataset with logical groupings.
Dependencies
| Package | Type |
|---|---|
| @tanstack/react-table | NPM |
| react | NPM |
table @shadcn | Registry |