14.3.5 • Published 1 year ago

@rmwc/data-table

Licence

MIT

Version

14.3.5

Deps

Size

26 kB

Vulns

Weekly

Stars

1.7K

Summary Dependency Versions

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'

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.

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.

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.

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.

<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('
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.


)
      ? { ...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']
  ]}
/>

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.

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

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

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.

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.

DataTable

The DataTable Component.

Props

Name	Type	Description
__INLINE_CODE_2__	__INLINE_CODE_3__	The number of columns to affix to the side of the table when scrolling.
__INLINE_CODE_4__	__INLINE_CODE_5__	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
__INLINE_CODE_6__	__INLINE_CODE_7__	Styles the row in a bolder activated state.
__INLINE_CODE_8__	__INLINE_CODE_9__	Styles the row in a selected state.

DataTableCell

A cell for the DataTable

Props

Name	Type	Description
__INLINE_CODE_10__	__INLINE_CODE_11__	Align content to the end of the cell.
__INLINE_CODE_12__	__INLINE_CODE_13__	Align content to the middle of the cell.
__INLINE_CODE_14__	__INLINE_CODE_15__	Align content to the start of the cell.
__INLINE_CODE_16__	__INLINE_CODE_17__	Optionally Remove padding on the cell for checkboxes, radios, and switches.
__INLINE_CODE_18__	__INLINE_CODE_19__	Changes alignment for numeric columns

Name	Type	Description
__INLINE_CODE_20__	__INLINE_CODE_21__	Align content to the end of the cell.
__INLINE_CODE_22__	__INLINE_CODE_23__	Align content to the middle of the cell.
__INLINE_CODE_24__	__INLINE_CODE_25__	Align content to the start of the cell.
__INLINE_CODE_26__	__INLINE_CODE_27__	Children to pass to the cell.
__INLINE_CODE_28__	__INLINE_CODE_29__	Optionally Remove padding on the cell for checkboxes, radios, and switches.
__INLINE_CODE_30__	__INLINE_CODE_31__	Changes alignment for numeric columns
__INLINE_CODE_32__	__INLINE_CODE_33__	A callback for when the sorting method changes. Null for not sorted, 1 for ascending, and -1 for descending.
__INLINE_CODE_34__	__INLINE_CODE_35__	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
__INLINE_CODE_36__	__INLINE_CODE_37__	Data to render.
__INLINE_CODE_38__	__INLINE_CODE_39__	A function that allows you to return custom props for a cell.
__INLINE_CODE_40__	__INLINE_CODE_41__	A function that allows you to return custom props for a row.
__INLINE_CODE_42__	__INLINE_CODE_43__	Table headers to render.
__INLINE_CODE_44__	__INLINE_CODE_45__	The number of columns to affix to the side of the table when scrolling.
__INLINE_CODE_46__	__INLINE_CODE_47__	The number of rows to affix to the top of the table when scrolling.

Keywords

rmwc