# @rmwc/data-table

> RMWC Data Table Component

Latest version **14.3.5** (published 2024-10-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install @rmwc/data-table
pnpm add @rmwc/data-table
yarn add @rmwc/data-table
bun add @rmwc/data-table
```

## Health

**Score 45/100 (D)** — status: stable.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: stale.

## Facts

| | |
|---|---|
| Version | 14.3.5 |
| Published | 2024-10-24 |
| First published | 2018-09-14 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 7 |
| Unpacked size | 26.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1657 |
| Author | rmwc |
| Maintainers | jamesmfriedman |
| Keywords | rmwc |

## Links

- npm: https://www.npmjs.com/package/@rmwc/data-table
- Repository: https://github.com/rmwc/rmwc
- Homepage: https://github.com/rmwc/rmwc/tree/master/packages/data-table
- Issues: https://github.com/rmwc/rmwc/issues
- npm.io page: https://npm.io/package/@rmwc/data-table

## Dependencies (7)

- [@rmwc/base](https://npm.io/package/@rmwc/base.md) 14.3.5
- [@rmwc/icon](https://npm.io/package/@rmwc/icon.md) 14.3.5
- [@rmwc/types](https://npm.io/package/@rmwc/types.md) 14.3.5
- [@rmwc/select](https://npm.io/package/@rmwc/select.md) 14.3.5
- [@rmwc/switch](https://npm.io/package/@rmwc/switch.md) 14.3.5
- [@rmwc/checkbox](https://npm.io/package/@rmwc/checkbox.md) 14.3.5
- [@material/data-table](https://npm.io/package/@material/data-table.md) ^14.0.0

## Recent versions

- 14.3.5 (latest) — 2024-10-24
- 14.0.2-alpha.7 (next) — 2023-10-30
- 14.3.4 — 2024-09-25
- 14.3.3 — 2024-08-30
- 14.3.2 — 2024-08-19
- 14.3.1 — 2024-07-19
- 14.3.0 — 2024-07-18
- 14.2.9 — 2024-07-03
- 14.2.8 — 2024-07-01
- 14.2.7 — 2024-06-30
- 14.2.6 — 2024-06-28
- 14.2.5 — 2024-06-26
- 14.2.2 — 2024-04-24
- 14.2.1 — 2024-04-17
- 14.2.0 — 2024-04-17
- … 147 more at https://npm.io/package/@rmwc/data-table/versions

## README

# Data Tables

Data tables display sets of data.

- Module **@rmwc/data-table**
- Import styles:
  - Using CSS Loader
    - import '@rmwc/data-table/styles';
  - Or include stylesheets
    - **'@material/data-table/dist/mdc.data-table.css'**
    - **'@rmwc/data-table/data-table.css'**
    - **'@rmwc/icon/icon.css'**


## Standard Table

The DataTable components are intended to be flexible, properly styled, Material compliant HTML tables. Because of the complexities of working with datasets (especially large ones), the DataTable component DOES NOT handle pagination, data fetching, sorting, or performance of long lists.

```jsx
function Example() {
  const [sortDir, setSortDir] = React.useState(null);
  const items = [
    { item: 'Cookies', quantity: 25, price: '$2.90' },
    { item: 'Pizza', quantity: 50, price: '$1.25' },
    { item: 'Icecream', quantity: 10, price: '$2.35' }
  ];
  const sortedItems =
    sortDir === 1
      ? items.sort((a, b) => a.quantity - b.quantity)
      : items.sort((a, b) => b.quantity - a.quantity);
  return (
    <DataTable>
      <DataTableContent>
        <DataTableHead>
          <DataTableRow>
            <DataTableHeadCell>Item</DataTableHeadCell>
            <DataTableHeadCell
              alignEnd
              sort={sortDir}
              onSortChange={(sortDir) => {
                setSortDir(sortDir);
                console.log(sortDir);
              }}
            >
              Quantity (Click Me)
            </DataTableHeadCell>
            <DataTableHeadCell alignEnd>Unit price</DataTableHeadCell>
          </DataTableRow>
        </DataTableHead>
        <DataTableBody>
          {sortedItems.map((item) => (
            <DataTableRow key={item.item}>
              <DataTableCell>{item.item}</DataTableCell>
              <DataTableCell alignEnd>{item.quantity}</DataTableCell>
              <DataTableCell alignEnd>{item.price}</DataTableCell>
            </DataTableRow>
          ))}
        </DataTableBody>
      </DataTableContent>
    </DataTable>
  );
}
```

## Scrollable / Sticky Rows and Columns

You can set a fixed sized for your table container to make it scrollable. Additionally, you can specify `stickyRows` or `stickyColumns` to affix rows or columns. Currently, only 1 row / column is supported but more may be supported in a future release.

```jsx
function Example() {
  const [rows, setRows] = React.useState(0);
  const [cols, setCols] = React.useState(0);
  const sampleColumns = Array(7).fill(undefined);
  const sampleRows = Array(50).fill(undefined);

  return (
    <>
      <DataTable
        style={{ height: '300px', width: '375px' }}
        stickyRows={rows}
        stickyColumns={cols}
      >
        <DataTableContent>
          <DataTableHead>
            <DataTableRow>
              <DataTableHeadCell>Label</DataTableHeadCell>
              {sampleColumns.map((v, i) => (
                <DataTableHeadCell key={i}>Header</DataTableHeadCell>
              ))}
            </DataTableRow>
          </DataTableHead>
          <DataTableBody>
            {sampleRows.map((v, i) => (
              <DataTableRow key={i}>
                <DataTableCell>Label</DataTableCell>
                <DataTableCell>R{i} C1</DataTableCell>
                <DataTableCell>R{i} C2</DataTableCell>
                <DataTableCell>R{i} C3</DataTableCell>
                <DataTableCell>R{i} C4</DataTableCell>
                <DataTableCell>R{i} C5</DataTableCell>
                <DataTableCell>R{i} C6</DataTableCell>
                <DataTableCell>R{i} C7</DataTableCell>
              </DataTableRow>
            ))}
          </DataTableBody>
        </DataTableContent>
      </DataTable>

      <div className="doc-controls">
        <Select
          label="Sticky Rows"
          options={['0', '1']}
          value={String(rows)}
          onChange={(evt) => setRows(Number(evt.currentTarget.value))}
        />
        <Select
          label="Sticky Cols"
          options={['0', '1']}
          value={String(cols)}
          onChange={(evt) => setCols(Number(evt.currentTarget.value))}
        />
      </div>
    </>
  );
}
```

## Form Controls

DataTables play nice with the rest of the RMWC form controls. You are responsible for scripting your own selection behavior.

```jsx
function Example() {
  const [checked, setChecked] = React.useState({});
  const sampleRows = new Array(5).fill(undefined);

  return (
    <DataTable>
      <DataTableContent>
        <DataTableHead>
          <DataTableRow>
            <DataTableHeadCell hasFormControl>
              <Checkbox />
            </DataTableHeadCell>
            <DataTableHeadCell>Label</DataTableHeadCell>
            <DataTableHeadCell>Header</DataTableHeadCell>
            <DataTableHeadCell>Header</DataTableHeadCell>
            <DataTableHeadCell>Toggle</DataTableHeadCell>
          </DataTableRow>
        </DataTableHead>
        <DataTableBody>
          {sampleRows.map((v, i) => (
            <DataTableRow key={i} selected={checked[i]}>
              <DataTableCell hasFormControl>
                <Checkbox
                  checked={checked[i]}
                  onChange={(evt) => {
                    checked[i] = evt.currentTarget.checked;
                    setChecked({ ...checked });
                  }}
                />
              </DataTableCell>
              <DataTableCell>Label</DataTableCell>
              <DataTableCell>
                <Select
                  placeholder="--Select--"
                  options={['Cookies', 'Pizza', 'Icecream']}
                />
              </DataTableCell>
              <DataTableCell>R{i} C3</DataTableCell>
              <DataTableCell>
                <Switch />
              </DataTableCell>
            </DataTableRow>
          ))}
        </DataTableBody>
      </DataTableContent>
    </DataTable>
  );
}
```

## Simplified Usage

If you just need to throw a table on the screen, you can pass an array of data to SimpleDataTable.

```jsx
<SimpleDataTable
  getRowProps={(row) => {
    return row[1] > 100 ? { activated: true } : {};
  }}
  getCellProps={(cell, index, isHead) => {
    const props = { isNumeric: index > 0, style: undefined };

    return !isHead &amp;&amp; index === 2 &amp;&amp; !cell.includes('$')
      ? { ...props, style: { color: 'red' } }
      : props;
  }}
  headers={[['Item', 'Quantity', 'Value']]}
  data={[
    ['Cookies', 25, '$12.40'],
    ['Pizza', 11, '$10.43'],
    ['Icecream', 3, '1.43'],
    ['Candy', 72, '$22.45'],
    ['Cakes', 101, '$215.05'],
    ['Muffins', 3, '$5.97']
  ]}
/>
```

## DataTable
The DataTable Component.

### Props

| Name | Type | Description |
|------|------|-------------|
| `stickyColumns` | `number` | The number of columns to affix to the side of the table when scrolling. |
| `stickyRows` | `number` | The number of rows to affix to the top of the table when scrolling. |


## DataTableRow
A row for the data table.

### Props

| Name | Type | Description |
|------|------|-------------|
| `activated` | `boolean` | Styles the row in a bolder activated state. |
| `selected` | `boolean` | Styles the row in a selected state. |


## DataTableCell
A cell for the DataTable

### Props

| Name | Type | Description |
|------|------|-------------|
| `alignEnd` | `boolean` | Align content to the end of the cell. |
| `alignMiddle` | `boolean` | Align content to the middle of the cell. |
| `alignStart` | `boolean` | Align content to the start of the cell. |
| `hasFormControl` | `boolean` | Optionally Remove padding on the cell for checkboxes, radios, and switches. |
| `isNumeric` | `boolean` | Changes alignment for numeric columns |


## DataTableHead
A header for the data table.



## DataTableBody
A body for the data table.



## DataTableHeadCell
A header cell for the data table.

### Props

| Name | Type | Description |
|------|------|-------------|
| `alignEnd` | `boolean` | Align content to the end of the cell. |
| `alignMiddle` | `boolean` | Align content to the middle of the cell. |
| `alignStart` | `boolean` | Align content to the start of the cell. |
| `children` | `ReactNode` | Children to pass to the cell. |
| `hasFormControl` | `boolean` | Optionally Remove padding on the cell for checkboxes, radios, and switches. |
| `isNumeric` | `boolean` | Changes alignment for numeric columns |
| `onSortChange` | `(dir: null \| number) => void` | A callback for when the sorting method changes. Null for not sorted, 1 for ascending, and -1 for descending. |
| `sort` | `null \| number` | Make the column sortable. Null for not sorted, 1 for ascending, and -1 for descending. |


## SimpleDataTable
A simple data table to render matrices.

### Props

| Name | Type | Description |
|------|------|-------------|
| `data` | `any[][]` | Data to render. |
| `getCellProps` | `(cell: any[], index: number, isHead: boolean) => Object` | A function that allows you to return custom props for a cell. |
| `getRowProps` | `(row: any[], index: number, isHead: boolean) => Object` | A function that allows you to return custom props for a row. |
| `headers` | `any[][]` | Table headers to render. |
| `stickyColumns` | `number` | The number of columns to affix to the side of the table when scrolling. |
| `stickyRows` | `number` | The number of rows to affix to the top of the table when scrolling. |

---
_Source: https://npm.io/package/@rmwc/data-table · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._