Arterial Data Table

Another React Material Data Table

Installation

``zsh
npm install @arterial/data-table
`

Usage

$3

#### Sass

`scss
@use "@material/data-table/data-table.scss" as data-table;
@include data-table.core-styles;
@include data-table.theme-baseline;
`

#### CSS

`jsx
import '@material/data-table/dist/mdc.data-table.css';
`

$3

`jsx
import { DataTable, DataTableCell, DataTableContent, ... } from '@arterial/data-table';
`

Baseline Data Table

`jsx
const numeric = [false, true, true, true, true];
const header = ['Dessert', 'Calories', 'Fat', 'Carbs', 'Protein (g)'];
const content = [
['Frozen yogurt', '159', '6', '24', '4'],
['Ice cream sandwich', '237', '9', '37', '4.3'],
['Eclair', '262', '16', '24', '6'],
];
function Demo() {
return (



{header.map((cellData, cellIndex) => (
numeric={numeric[cellIndex]}
key={baseline-header-row-${cellData}-cell}
>
{cellData}

))}



{content.map((rowData, rowIndex) => (
baseline-${rowIndex}-row}>
{rowData.map((cellData, cellIndex) => (
numeric={numeric[cellIndex]}
key={baseline-${rowIndex}-row-${header[cellIndex]}-cell-${cellData}}
>
{cellData}

))}

))}


);
}
`

Checkbox Data Table

`jsx
const numeric = [false, true, true, true, true];
const header = ['Dessert', 'Calories', 'Fat', 'Carbs', 'Protein (g)'];
const content = [
['Frozen yogurt', '159', '6', '24', '4'],
['Ice cream sandwich', '237', '9', '37', '4.3'],
['Eclair', '262', '16', '24', '6'],
];
function initChecked() {
const checked = {};
content.forEach((_rowData, rowIndex) => {
checked[rowIndex] = false;
});
return checked;
}
function CheckboxTable() {
const [headerChecked, setHeaderChecked] = useState('');
const [bodyChecked, setBodyChecked] = useState(initChecked());
return (



{header.map((cellData, cellIndex) => (
checkbox-header-row-${cellData}-cell}>
{cellIndex === 0 && (
checkbox
checkboxId={${cellData}-checkbox}
checked={headerChecked === 'checked'}
indeterminate={headerChecked === 'indeterminate'}
onChange={data => {
Object.keys(bodyChecked).forEach(key => {
bodyChecked[key] = data.checked;
});
setHeaderChecked(data.checked ? 'checked' : '');
setBodyChecked({...bodyChecked});
}}
/>
)}

{cellData}


))}



{content.map((rowData, rowIndex) => (
selected={bodyChecked[rowIndex]}
key={checkbox-${rowIndex}-row}
>
{rowData.map((cellData, cellIndex) => (
key={checkbox-${rowIndex}-row-${header[cellIndex]}-cell-${cellData}}
>
{cellIndex === 0 && (
checkbox
checkboxId={${cellData}-checkbox}
checked={bodyChecked[rowIndex] === true}
onChange={data => {
bodyChecked[rowIndex] = data.checked;
const values = Object.values(bodyChecked);
const checked = values.find(checked => checked);
const noneChecked = checked
? false
: values.every(checked => !checked);
const unchecked = values.find(checked => !checked);
const allChecked = unchecked
? false
: values.every(checked => checked);
let header;
if (allChecked) {
header = 'checked';
} else if (noneChecked) {
header = '';
} else {
header = 'indeterminate';
}
setHeaderChecked(header);
setBodyChecked({...bodyChecked});
}}
/>
)}

{cellData}


))}

))}


);
}
``

Props

$3

| Name | Type | Description |
| --------- | ------ | --------------------------------------------- |
| children | node | Elements to be displayed within root element. |
| className | string | Classes to be applied to the root element. |
| label | string | Text to be displayed within the root element. |

$3

| Name | Type | Description |
| --------- | ------ | --------------------------------------------- |
| children | node | Elements to be displayed within root element. |
| className | string | Classes to be applied to the root element. |

$3

| Name | Type | Description |
| --------- | ------- | --------------------------------------------- |
| children | node | Elements to be displayed within root element. |
| className | string | Classes to be applied to the root element. |
| selected | boolean | Indicates whether the element is selected. |

$3

| Name | Type | Description |
| ---------- | ------- | ----------------------------------------------------- |
| checkbox | boolean | Enables checkbox to be displayed within root element. |
| checkboxId | string | Id of the checkbox. |
| children | node | Elements to be displayed within root element. |
| className | string | Classes to be applied to the root element. |
| numeric | boolean | Enables a numeric variant. |

$3

| Name | Type | Description |
| --------- | ------ | --------------------------------------------- |
| children | node | Elements to be displayed within root element. |
| className | string | Classes to be applied to the root element. |

$3

| Name | Type | Description |
| --------- | ------- | --------------------------------------------- |
| children | node | Elements to be displayed within root element. |
| className | string | Classes to be applied to the root element. |
| selected | boolean | Indicates whether the element is selected. |

$3

| Name | Type | Description |
| ---------- | ------- | ----------------------------------------------------- |
| checkbox | boolean | Enables checkbox to be displayed within root element. |
| checkboxId | string | Id of the checkbox. |
| children | node | Elements to be displayed within root element. |
| className | string | Classes to be applied to the root element. |
| numeric | boolean | Enables a numeric variant. |