@arterial/data-table

Another React Material Data Table

Usage no npm install needed!

<script type="module">
  import arterialDataTable from 'https://cdn.skypack.dev/@arterial/data-table';
</script>

README

Arterial Data Table

Another React Material Data Table

Installation

npm install @arterial/data-table

Usage

Styles

Sass

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

CSS

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

JSX

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

Baseline Data Table

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 (
    <DataTable>
      <DataTableHeader>
        <DataTableHeaderRow>
          {header.map((cellData, cellIndex) => (
            <DataTableHeaderCell
              numeric={numeric[cellIndex]}
              key={`baseline-header-row-${cellData}-cell`}
            >
              {cellData}
            </DataTableHeaderCell>
          ))}
        </DataTableHeaderRow>
      </DataTableHeader>
      <DataTableContent>
        {content.map((rowData, rowIndex) => (
          <DataTableRow key={`baseline-${rowIndex}-row`}>
            {rowData.map((cellData, cellIndex) => (
              <DataTableCell
                numeric={numeric[cellIndex]}
                key={`baseline-${rowIndex}-row-${header[cellIndex]}-cell-${cellData}`}
              >
                {cellData}
              </DataTableCell>
            ))}
          </DataTableRow>
        ))}
      </DataTableContent>
    </DataTable>
  );
}

Checkbox Data Table

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 (
    <DataTable>
      <DataTableHeader>
        <DataTableHeaderRow>
          {header.map((cellData, cellIndex) => (
            <React.Fragment key={`checkbox-header-row-${cellData}-cell`}>
              {cellIndex === 0 && (
                <DataTableHeaderCell
                  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});
                  }}
                />
              )}
              <DataTableHeaderCell numeric={numeric[cellIndex]}>
                {cellData}
              </DataTableHeaderCell>
            </React.Fragment>
          ))}
        </DataTableHeaderRow>
      </DataTableHeader>
      <DataTableContent>
        {content.map((rowData, rowIndex) => (
          <DataTableRow
            selected={bodyChecked[rowIndex]}
            key={`checkbox-${rowIndex}-row`}
          >
            {rowData.map((cellData, cellIndex) => (
              <React.Fragment
                key={`checkbox-${rowIndex}-row-${header[cellIndex]}-cell-${cellData}`}
              >
                {cellIndex === 0 && (
                  <DataTableCell
                    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});
                    }}
                  />
                )}
                <DataTableCell numeric={numeric[cellIndex]}>
                  {cellData}
                </DataTableCell>
              </React.Fragment>
            ))}
          </DataTableRow>
        ))}
      </DataTableContent>
    </DataTable>
  );
}

Props

DataTable

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.

DataTableHeader

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

DataTableHeaderRow

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.

DataTableHeaderCell

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.

DataTableContent

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

DataTableRow

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.

DataTableCell

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.