Data Table
Data tables display sets of data across rows and columns. They organize information in a way that's easy to scan, so users can look for patterns and insights.
| Dessert | Calories | Fat | Carbs | Protein |
|---|---|---|---|---|
| Frozen yogurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 |
| Eclair | 262 | 16 | 24 | 6 |
<x-mbc::data-table
:header="['Dessert', 'Calories', 'Fat', 'Carbs', 'Protein']"
:data="[
['Frozen yogurt', 159, 6.0, 24, 4.0],
['Ice cream sandwich', 237, 9.0, 37, 4.3],
['Eclair', 262, 16.0, 24, 6.0],
]"
/>Basic Data Table
Create a simple data table by passing the data prop with an array of rows. The first column in each row is automatically treated as the row header.
| Product A | In Stock | $99.99 |
|---|---|---|
| Product B | Low Stock | $149.99 |
| Product C | Out of Stock | $79.99 |
| Product D | In Stock | $199.99 |
<x-mbc::data-table
:data="[
['Product A', 'In Stock', '$99.99'],
['Product B', 'Low Stock', '$149.99'],
['Product C', 'Out of Stock', '$79.99'],
['Product D', 'In Stock', '$199.99'],
]"
/>
Note: Without headers, the table displays only the data rows. The first column automatically becomes a row header (<th>) for accessibility.
Data Table with Header
Add column headers using the header prop. Headers help users understand what each column represents and improve table accessibility.
| Product Name | Category | Status | Price |
|---|---|---|---|
| Laptop Pro | Electronics | Available | $1,299 |
| Wireless Mouse | Accessories | Available | $29 |
| USB-C Cable | Accessories | Limited | $19 |
| Monitor 27" | Electronics | Available | $399 |
| Keyboard Mechanical | Accessories | Out of Stock | $149 |
<x-mbc::data-table
:header="['Product Name', 'Category', 'Status', 'Price']"
:data="[
['Laptop Pro', 'Electronics', 'Available', '$1,299'],
['Wireless Mouse', 'Accessories', 'Available', '$29'],
['USB-C Cable', 'Accessories', 'Limited', '$19'],
['Monitor 27"', 'Electronics', 'Available', '$399'],
['Keyboard Mechanical', 'Accessories', 'Out of Stock', '$149'],
]"
aria-label="Product inventory table"
/>
Tip: Use the aria-label attribute to provide an accessible description of the table's purpose.
Data Table with Checkboxes
Enable row selection by setting withCheckbox to true. When using checkboxes, the first column of your data array controls the checkbox state (true for checked, false for unchecked). This column won't be displayed as data.
|
|
Task | Assignee | Due Date | Priority |
|---|---|---|---|---|
|
|
Update documentation | John Doe | 2024-12-15 | High |
|
|
Fix navigation bug | Jane Smith | 2024-12-10 | Critical |
|
|
Add new feature | Bob Johnson | 2024-12-20 | Medium |
|
|
Code review | Alice Brown | 2024-12-12 | Low |
|
|
Deploy to staging | John Doe | 2024-12-08 | High |
<x-mbc::data-table
:header="['Task', 'Assignee', 'Due Date', 'Priority']"
:data="[
[true, 'Update documentation', 'John Doe', '2024-12-15', 'High'],
[true, 'Fix navigation bug', 'Jane Smith', '2024-12-10', 'Critical'],
[false, 'Add new feature', 'Bob Johnson', '2024-12-20', 'Medium'],
[false, 'Code review', 'Alice Brown', '2024-12-12', 'Low'],
[true, 'Deploy to staging', 'John Doe', '2024-12-08', 'High'],
]"
:withCheckbox="true"
aria-label="Task list with selection"
/>
Important: When withCheckbox is enabled, the first element in each data row array controls the checkbox state and is not displayed as a table cell. The header checkbox allows selecting all rows at once.
Numeric Columns
Numeric columns are automatically right-aligned when cell values are numeric. You can also explicitly mark header columns as numeric by using 'numeric' as the header value with the column name as the array key.
| Dessert | Calories | Fat (g) | Carbs (g) | Protein (g) |
|---|---|---|---|---|
| Frozen yogurt | 159 | 6 | 24 | 4 |
| Ice cream sandwich | 237 | 9 | 37 | 4.3 |
| Eclair | 262 | 16 | 24 | 6 |
| Cupcake | 305 | 3.7 | 67 | 4.3 |
| Gingerbread | 356 | 16 | 49 | 3.9 |
| Jelly bean | 375 | 0 | 94 | 0 |
| Lollipop | 392 | 0.2 | 98 | 0 |
| Honeycomb | 408 | 3.2 | 87 | 6.5 |
| Donut | 452 | 25 | 51 | 4.9 |
| KitKat | 518 | 26 | 65 | 7 |
<x-mbc::data-table
:header="['Dessert', 'Calories' => 'numeric', 'Fat (g)' => 'numeric', 'Carbs (g)' => 'numeric', 'Protein (g)' => 'numeric']"
:data="[
['Frozen yogurt', 159, 6.0, 24, 4.0],
['Ice cream sandwich', 237, 9.0, 37, 4.3],
['Eclair', 262, 16.0, 24, 6.0],
['Cupcake', 305, 3.7, 67, 4.3],
['Gingerbread', 356, 16.0, 49, 3.9],
['Jelly bean', 375, 0.0, 94, 0.0],
['Lollipop', 392, 0.2, 98, 0.0],
['Honeycomb', 408, 3.2, 87, 6.5],
['Donut', 452, 25.0, 51, 4.9],
['KitKat', 518, 26.0, 65, 7.0],
]"
aria-label="Nutrition facts table"
/>Note: Numeric columns receive special styling with right alignment. Explicitly marking columns as numeric using the key-value syntax ensures consistent alignment even for mixed content.
Complete Example
A comprehensive example combining headers, checkboxes, numeric columns, and HTML content in cells. You can use HTML in cell values for rich content like badges, icons, or formatted text.
|
|
User | Role | Status | Orders | Revenue | |
|---|---|---|---|---|---|---|
|
|
John Doe | john.doe@example.com | Administrator | Active | 127 | 15420.5 |
|
|
Jane Smith | jane.smith@example.com | Editor | Active | 89 | 9350.75 |
|
|
Bob Johnson | bob.johnson@example.com | Customer | Pending | 45 | 5280 |
|
|
Alice Brown | alice.brown@example.com | Customer | Inactive | 12 | 1150.25 |
<x-mbc::data-table
:header="['User', 'Email', 'Role', 'Status', 'Orders' => 'numeric', 'Revenue' => 'numeric']"
:data="[
[
true,
'<strong>John Doe</strong>',
'john.doe@example.com',
'Administrator',
'<span style="background: #4CAF50; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">Active</span>',
127,
15420.50
],
[
false,
'<strong>Jane Smith</strong>',
'jane.smith@example.com',
'Editor',
'<span style="background: #4CAF50; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">Active</span>',
89,
9350.75
],
[
true,
'<strong>Bob Johnson</strong>',
'bob.johnson@example.com',
'Customer',
'<span style="background: #FFC107; color: #333; padding: 2px 8px; border-radius: 4px; font-size: 12px;">Pending</span>',
45,
5280.00
],
[
false,
'<strong>Alice Brown</strong>',
'alice.brown@example.com',
'Customer',
'<span style="background: #F44336; color: white; padding: 2px 8px; border-radius: 4px; font-size: 12px;">Inactive</span>',
12,
1150.25
],
]"
:withCheckbox="true"
aria-label="User management table"
/>Tip: Cell values can contain HTML for rich formatting. Use this to display status badges, icons, links, or any custom content. The component renders HTML content in cells.
Properties
mbc::data-table
| Name | Type | Default | Description |
|---|---|---|---|
aria-label
|
string
|
null
|
Accessible label for the table |
data
|
array
|
[]
|
Array of rows, where each row is an array of cell values |
header
|
array
|
[]
|
Array of column headers. Use "numeric" as value for numeric columns. |
withCheckbox
|
boolean
|
false
|
Include row selection checkboxes. First column in data becomes checkbox state (true/false) |