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.

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 (
    
      
        
          
            Item
             {
                setSortDir(sortDir);
                console.log(sortDir);
              }}
            >
              Quantity (Click Me)
            
            Unit price
          
        
        
          {sortedItems.map((item) => (
            
              {item.item}
              {item.quantity}
              {item.price}
            
          ))}
        
      
    
  );
}

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 (
    <>
      
        
          
            
              Label
              {sampleColumns.map((v, i) => (
                Header
              ))}
            
          
          
            {sampleRows.map((v, i) => (
              
                Label
                R{i} C1
                R{i} C2
                R{i} C3
                R{i} C4
                R{i} C5
                R{i} C6
                R{i} C7
              
            ))}
          
        
      

      <div>
        <select value="{String(rows)}" label="Sticky Rows"> setRows(Number(evt.currentTarget.value))}
        /&gt;
        </select> setCols(Number(evt.currentTarget.value))}
        /&gt;
      </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 (
    
      
        
          
            
              
            
            Label
            Header
            Header
            Toggle
          
        
        
          {sampleRows.map((v, i) => (
            
              
                 {
                    checked[i] = evt.currentTarget.checked;
                    setChecked({ ...checked });
                  }}
                />
              
              Label
              
                <select placeholder="--Select--">
              
              R{i} C3
              
                
              
            
          ))}
        
      
    
  );
}

Simplified Usage

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

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

    return !isHead && index === 2 && !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

DataTableRow

A row for the data table.

Props

DataTableCell

A cell for the DataTable

Props

DataTableHead

A header for the data table.

DataTableBody

A body for the data table.

DataTableHeadCell

A header cell for the data table.

Props

SimpleDataTable

A simple data table to render matrices.

Props