Figma component
Deprecated
Show details
Datagrid component has been deprecated in favour of the Datatable
Overview
The datagrid component offers multiple ways to create tables. You can use a fully built table component or modular table partial components to customise your setup. These modular elements give you flexibility, letting you build tables in different ways, each with its own benefits.
Key Features
- Cell Variants: Supports multiple input types for flexible data representation.
- Composable with Partials: Provides different types of building blocks for creating tables: columns, rows and cells.
- Customisable with Slots: Cell content can be replaced with local components.
- Accessibility: Fully keyboard navigable and screen-reader accessible.Anatomy
Anatomy
- Header Row: Defines the column structure, providing labels and actions for sorting or filtering data.
- Body Row: Displays individual data entries, supporting interaction.
Look and Feel
States define how the component behaves and appears in different interactions. The following are provided for the partial components:
- Default: The standard appearance when inactive.
- Hover: Highlights the row when the user hovers over it.
- Selected: Highlights the row to indicate it has been chosen for an action.
Cell Types
Header Cells
The header cell is available as two variants, a label and a checkbox. Additionally the sorting icon and tooltip icon can be optionally enabled or disabled within the header cell.
|
Header label: Displays the title of a table column, providing context and structure for the data in each column. |
|
Header checkbox: Allows users to select or deselect all rows in the table for bulk actions. |
|
Sorting icon: Indicates the current sort order of a column and allows toggling between ascending, descending, or no sorting. |
|
Tooltip: Provides additional information or context when hovering over the icon. |
Body Cell Types
There are 7 different types of body content cells:
|
Acton: Contains an icon button and optional second button for performing row-specific actions. |
|
Avatar: Displays a user’s profile image or initials for identification. |
|
Badge Cell: Categorizes, prioritizes, or highlights important statuses within the table for quick reference. |
|
Checkbox: Enables selection of single or multiple rows for bulk actions. |
|
Link: Displays interactive links for navigation or external actions. |
|
Mono Text: Ideal for numerical data, code, or identifiers, ensuring consistent alignment and readability. |
|
Text and subtitle: Combines a primary text label with an optional subtitle for additional context. |
Composable with Partials
Several datagrid partial components are provided — columns, rows, and cells. These offer flexibility and can be combined to create custom tables tailored to your needs.
Columns
The column partial is a column composed of a header cell and body cell partials. It includes 10 body cells that can be shown or hidden as needed, with 9 predefined column variations, each featuring a different content type.
Rows
A row partial is a full row composed of cell partials, featuring a header row and body row, each with 14 cells that can be shown or hidden as needed. It also includes hover and selected states for the entire row.
Cells
Cell partials offer complete flexibility for building a datagrid, consisting of both header and body cells. The header supports two content types, while the body provides seven distinct content types
Customisable with Slots
Custom content can be added to the body cell component with the slot.
Links
The Figma file holds the latest UI designs, while the Web Component, Blazor, Angular, React, and VueJS links offer a live demo of components in various states, themes, and interactions.
Feedback
Have feedback, an idea, or a bug to report? Head over to our Contributions page.