DataTable
The DataTable component displays data in a tabular format with support for sorting, filtering, pagination, and row selection.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
value | array | [] | An array of data to display in the table |
selectionMode | string | null | Selection mode. Options: single, multiple |
dataKey | string | null | Unique identifier field name for rows |
rows | number | 10 | Number of rows per page |
sortable | boolean | false | Enables column sorting |
filterDisplay | string | null | Filter display mode. Options: row, menu |
Basic Usage
Advanced DataTable with Custom Templates
Table Header
Name | Status | Role | Email Address | Teams | ||
|---|---|---|---|---|---|---|
HM Harry Maugansharry@privacybee.com | Active | Product Designer | harry@privacybee.com | DesignProductMarketing +4 | ||
HM Olivia Martinezolivia@privacybee.com | Active | Frontend Developer | olivia@privacybee.com | EngineeringFrontend +4 | ||
HM James Chenjames@privacybee.com | Inactive | UX Researcher | james@privacybee.com | ResearchDesign +4 | ||
HM Sarah Johnsonsarah@privacybee.com | Active | Product Manager | sarah@privacybee.com | ProductLeadership +4 | ||
HM Michael Brownmichael@privacybee.com | Active | Backend Developer | michael@privacybee.com | EngineeringBackendDevOps +4 |
Advanced DataTable with Row Expansion
Table Header
Name | Status | Role | Email Address | Teams | |||
|---|---|---|---|---|---|---|---|
HM Harry Maugansharry@privacybee.com | Active | Product Designer | harry@privacybee.com | DesignProductMarketing +4 | |||
HM Olivia Martinezolivia@privacybee.com | Active | Frontend Developer | olivia@privacybee.com | EngineeringFrontend +4 | |||
HM James Chenjames@privacybee.com | Inactive | UX Researcher | james@privacybee.com | ResearchDesign +4 | |||
HM Sarah Johnsonsarah@privacybee.com | Active | Product Manager | sarah@privacybee.com | ProductLeadership +4 | |||
HM Michael Brownmichael@privacybee.com | Active | Backend Developer | michael@privacybee.com | EngineeringBackendDevOps +4 |
Custom Header Template
The header includes a title and an actions menu icon for table-level operations.
Row Expansion
Click the expander icon in the first column to reveal additional employee details including join date, department, location, and reporting manager.
Multiple Selection
Checkbox column allows users to select multiple rows for batch operations.
Custom Cell Templates
- Name Column: Displays user avatar with name and email in a stacked layout
- Status Column: Uses Badge component with dynamic severity based on status value
- Teams Column: Shows first 2 team badges and a count badge for remaining teams
Header Customization
- Status Column: Custom header with sort indicator icon
- Role Column: Header includes tooltip with additional information
Action Icons
Each row has edit and delete action icons for row-level operations.
Features
- Row Selection: Support for single and multiple row selection with checkboxes
- Custom Templates: Full control over header and body cell rendering
- Badge Integration: Display status and tags using Badge component
- Avatar Support: Show user avatars with initials or images
- Tooltips: Add contextual help to column headers
- Action Icons: Include row-level actions like edit and delete
- Responsive Design: Adapts to different screen sizes
- Customizable Styling: Extensive theming and styling options
- Row Expansion: Click the expander icon to reveal additional details for each row
- Row Selection: Support for single and multiple row selection with checkboxes