Skip Navigation
React Magma

Datagrid

Similar to the Table component, the Datagrid takes in data in a set of props and renders rows and columns accordingly.

Basic Usage

import React from 'react';


import { Datagrid, Card } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
  ];


  return (
    <Card>
      <Datagrid columns={columns} rows={rows} />
    </Card>
  );
}

Row Color

import React from 'react';


import { Datagrid, TableRowColor } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const coloredRows = [
    {
      id: 1,
      color: TableRowColor.danger,
      col1: 'Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row danger',
    },
    {
      id: 2,
      color: TableRowColor.info,
      col1: 'Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row info',
    },
    {
      id: 3,
      color: TableRowColor.success,
      col1: 'Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row success',
    },
  ];


  return <Datagrid columns={columns} rows={coloredRows} hasSquareCorners />;
}

Selectable

Use rowName when using Selectable so that the aria labels on the checkboxes can be unique, otherwise the labels will default to "Select Row" or "Deselect Row."

import React from 'react';


import { Datagrid, Card } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 1',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 2',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 3',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 4',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 5',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 6',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 7',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 8',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 9',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 10',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 11',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 12',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 13',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 14',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 15',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 16',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 17',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 18',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 19',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 20',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 21',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 22',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 23',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 24',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 25',
    },
  ];


  return (
    <Card>
      <Datagrid columns={columns} rows={rows} isSelectable />
    </Card>
  );
}

Disabled Selectable Row

import React from 'react';


import { Datagrid, Card } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 1',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 2',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 3',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      isSelectableDisabled: true,
      rowName: 'Row 4',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 5',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 6',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 7',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 8',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 9',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 10',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 11',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 12',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 13',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 14',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 15',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 16',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 17',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 18',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 19',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 20',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 21',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 22',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 23',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 24',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 25',
    },
  ];


  return (
    <Card>
      <Datagrid columns={columns} rows={rows} isSelectable />
    </Card>
  );
}

Selectable and Sortable

import React from 'react';


import {
  Datagrid,
  TableSortDirection,
  Announce,
  VisuallyHidden,
} from 'react-magma-dom';


export function Example() {
  const [sortConfig, setSortConfig] = React.useState({
    key: '',
    message: '',
  });
  const [selectedDirection, setSelectedDirection] = React.useState(
    TableSortDirection.none
  );
  const [priceDirection, setPriceDirection] = React.useState(
    TableSortDirection.none
  );
  const [stockDirection, setStockDirection] = React.useState(
    TableSortDirection.none
  );


  const requestSort = (key: string) => {
    let direction = TableSortDirection.ascending;


    if (key === 'name') {
      if (
        sortConfig.key === key &&
        selectedDirection === TableSortDirection.ascending
      ) {
        direction = TableSortDirection.descending;
      }
      setSelectedDirection(direction);
      setPriceDirection(TableSortDirection.none);
      setStockDirection(TableSortDirection.none);
    } else if (key === 'price') {
      if (
        sortConfig.key === key &&
        priceDirection === TableSortDirection.ascending
      ) {
        direction = TableSortDirection.descending;
      }
      setPriceDirection(direction);
      setSelectedDirection(TableSortDirection.none);
      setStockDirection(TableSortDirection.none);
    } else if (key === 'stock') {
      if (
        sortConfig.key === key &&
        stockDirection === TableSortDirection.ascending
      ) {
        direction = TableSortDirection.descending;
      }
      setStockDirection(direction);
      setPriceDirection(TableSortDirection.none);
      setSelectedDirection(TableSortDirection.none);
    }


    const message = `Table is sorted by ${key}, ${direction}`;
    setSortConfig({ key, message });
  };


  const productColumns = [
    { field: 'name', header: 'Name' },
    {
      field: 'price',
      header: 'Price',
      isSortable: true,
      onSort: () => {
        requestSort('price');
      },
      sortDirection: priceDirection,
    },
    {
      field: 'stock',
      header: 'Stock',
      isSortable: true,
      onSort: () => {
        requestSort('stock');
      },
      sortDirection: stockDirection,
    },
  ];
  const products = [
    { id: 1, name: 'Cheese', price: 5, stock: 20 },
    { id: 2, name: 'Milk', price: 5, stock: 32 },
    { id: 3, name: 'Yogurt', price: 3, stock: 12 },
    { id: 4, name: 'Heavy Cream', price: 10, stock: 9 },
    { id: 5, name: 'Butter', price: 2, stock: 99 },
    { id: 6, name: 'Sour Cream ', price: 4, stock: 86 },
  ];


  const [selectedItems, setSelectedItems] = React.useState([]);


  const sortedItems = React.useMemo(() => {
    if (sortConfig.key === 'name') {
      const selectedItemsToSort = products.filter(product =>
        selectedItems.includes(product.id)
      );
      const nonSelectedItems = products.filter(
        product => !selectedItems.includes(product.id)
      );
      let sortOrder = 0;
      if (sortConfig !== null) {
        if (selectedItemsToSort.length < 2) {
          sortOrder =
            selectedDirection === TableSortDirection.ascending ? -1 : 1;
        }
        selectedItemsToSort.sort((a, b) => {
          if (a[sortConfig.key] < b[sortConfig.key]) {
            sortOrder =
              selectedDirection === TableSortDirection.ascending ? -1 : 1;
          }
          if (a[sortConfig.key] > b[sortConfig.key]) {
            sortOrder =
              selectedDirection === TableSortDirection.ascending ? 1 : -1;
          }
          return sortOrder;
        });
      }
      if (selectedItemsToSort.length === 0) {
        return products;
      } else if (sortOrder === 1) {
        return selectedItemsToSort.concat(nonSelectedItems);
      } else {
        return nonSelectedItems.concat(selectedItemsToSort);
      }
    } else {
      const sortableItems = [...products];
      const direction =
        sortConfig.key === 'price' ? priceDirection : stockDirection;
      sortableItems.sort((a, b) => {
        if (a[sortConfig.key] < b[sortConfig.key]) {
          return direction === TableSortDirection.ascending ? -1 : 1;
        }
        if (a[sortConfig.key] > b[sortConfig.key]) {
          return direction === TableSortDirection.ascending ? 1 : -1;
        }
        return 0;
      });
      return sortableItems;
    }
  }, [sortConfig]);


  function handleSelectedItems(
    id: string | number,
    ev: React.ChangeEvent<HTMLInputElement>
  ) {
    if (ev.target.checked) {
      if (!selectedItems.includes(id)) {
        setSelectedItems([...selectedItems, id]);
      }
    } else if (!ev.target.checked) {
      setSelectedItems(selectedItems.filter(i => i !== id));
    }
  }


  function handleHeaderSelect(ev: React.ChangeEvent<HTMLInputElement>) {
    if (ev.target.checked && selectedItems.length === 0) {
      const checkedIds = [];
      products.filter(prod => checkedIds.push(prod.id));
      setSelectedItems(checkedIds);
    } else {
      setSelectedItems([]);
    }
  }


  return (
    <>
      <Datagrid
        isSelectable
        isSortableBySelected
        rows={sortedItems}
        columns={productColumns}
        onSortBySelected={() => {
          requestSort('name');
        }}
        onRowSelect={handleSelectedItems}
        onHeaderSelect={handleHeaderSelect}
        sortDirection={selectedDirection}
      />
      <Announce>
        <VisuallyHidden>{sortConfig.message}</VisuallyHidden>
      </Announce>
    </>
  );
}

Controlled Selectable Column

import React from 'react';


import { Button, ButtonColor, Datagrid, Card } from 'react-magma-dom';


export function Example() {
  const [selectedRows, updatedSelectedRows] = React.useState<
    (string | number)[]
  >([1]);


  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 1',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 2',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 3',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 4',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 5',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 6',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 7',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 8',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 9',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 10',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 11',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 12',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 13',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 14',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 15',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 16',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 17',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 18',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 19',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 20',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 21',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 22',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 23',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 24',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
      rowName: 'Row 25',
    },
  ];


  return (
    <Card>
      <strong>Selected Rows: </strong>
      <pre>{JSON.stringify(selectedRows, null, 2)}</pre>
      <Button
        color={ButtonColor.danger}
        onClick={() => updatedSelectedRows([])}
      >
        Reset Selected Rows
      </Button>
      <hr />
      <Datagrid
        columns={columns}
        rows={rows}
        isSelectable
        selectedRows={selectedRows}
        onSelectedRowsChange={updatedSelectedRows}
      />
    </Card>
  );
}

Pagination Defaults

import React from 'react';


import { Datagrid } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
  ];


  const paginationProps = {
    defaultPage: 2,
    defaultRowsPerPage: 5,
    rowsPerPageValues: [5, 10, 20],
  };


  return (
    <Datagrid columns={columns} rows={rows} paginationProps={paginationProps} />
  );
}

Pagination Controlled

import React from 'react';


import { Datagrid } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
  ];


  const [page, updatePage] = React.useState<number>(1);
  const [rowsPerPage, updateRowsPerPage] = React.useState<number>(5);


  function handlePageChange(_, newPage: number) {
    window.confirm('Do you really want to update the page?')
      ? updatePage(newPage)
      : alert('Did not update page');
  }


  function handleRowsPerPageChange(newRowsPerPage: number) {
    window.confirm(
      `Do you really want to update the rows per page to ${newRowsPerPage}?`
    )
      ? updateRowsPerPage(newRowsPerPage)
      : alert('Did not update rows per page');
  }


  const paginationProps = {
    page,
    rowsPerPage,
    rowsPerPageValues: [5, 10, 20],
    onPageChange: handlePageChange,
    onRowsPerPageChange: handleRowsPerPageChange,
  };


  return (
    <Datagrid columns={columns} rows={rows} paginationProps={paginationProps} />
  );
}

Custom Pagination Components

import React from 'react';


import {
  Datagrid,
  Button,
  usePagination,
  ButtonGroup,
  Spacer,
  SpacerAxis,
  magma,
} from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
  ];


  const CustomPaginationComponent = props => {
    const { itemCount, rowsPerPage, onPageChange } = props;
    const { page, pageButtons } = usePagination({
      count: itemCount / rowsPerPage,
      numberOfAdjacentPages: 0,
      numberOfEdgePages: 0,
      onPageChange,
    });


    const previousButton = pageButtons[0];
    const nextButton = pageButtons[pageButtons.length - 1];


    return (
      <div
        style={{
          alignItems: 'center',
          display: 'flex',
          justifyContent: 'flex-end',
        }}
      >
        You are on page {page}
        <Spacer
          axis={SpacerAxis.horizontal}
          size={magma.spaceScale.spacing05}
        />
        <ButtonGroup>
          <Button
            disabled={previousButton.disabled}
            onClick={previousButton.onClick}
          >
            Previous Page
          </Button>
          <Button disabled={nextButton.disabled} onClick={nextButton.onClick}>
            Next Page
          </Button>
        </ButtonGroup>
      </div>
    );
  };


  return (
    <Datagrid
      columns={columns}
      rows={rows}
      components={{ Pagination: CustomPaginationComponent }}
    />
  );
}

Without Pagination

Pagination controls are put on the Datagrid component by default. You can turn off pagination by passing the hasPagination prop as false.

import React from 'react';


import { Datagrid } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: '1 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 2,
      col1: '2 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 3,
      col1: '3 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 4,
      col1: '4 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 5,
      col1: '5 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 6,
      col1: '6 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 7,
      col1: '7  Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 8,
      col1: '8 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 9,
      col1: '9 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 10,
      col1: '10 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 11,
      col1: '11 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 12,
      col1: '12 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 13,
      col1: '13 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 14,
      col1: '14 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 15,
      col1: '15 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 16,
      col1: '16 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 17,
      col1: '17 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 18,
      col1: '18 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 19,
      col1: '19 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 20,
      col1: '20 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 21,
      col1: '21 Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 22,
      col1: '22 Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 23,
      col1: '23 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 24,
      col1: '24 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 25,
      col1: '25 Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
  ];


  return <Datagrid columns={columns} rows={rows} hasPagination={false} />;
}

Inverse

The isInverse prop will render a dark background and light text. The children will inherit the isInverse prop unless specified otherwise.

import React from 'react';


import { Datagrid, Card } from 'react-magma-dom';


export function Example() {
  const columns = [
    { field: 'col1', header: 'Col 1' },
    { field: 'col2', header: 'Col 2' },
    { field: 'col3', header: 'Col 3' },
    { field: 'col4', header: 'Col 4' },
  ];


  const rows = [
    {
      id: 1,
      col1: 'Lorem ipsum dolor sit amet consectetur',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 2,
      col1: 'Lorem ipsum dolor sit amet',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
    {
      id: 3,
      col1: 'Lorem ipsum dolor',
      col2: 'Lorem ipsum dolor',
      col3: 'Lorem ipsum dolor',
      col4: 'Lorem ipsum',
    },
  ];


  return (
    <Card isInverse>
      <Datagrid columns={columns} isInverse rows={rows} />
    </Card>
  );
}

Datagrid Props

Any other props supplied will be provided to the wrapping table element.

Common Props

children

Required

Description

The content of the component

Type

ReactNode | undefined

Default

-

columns

Required

Description

Column data to be displayed in the table header

Type

DatagridColumn[]

Default

-

components

Description

Custom components to replace internally used components with

Type

DatagridComponents

Default

{ Pagination }

componentsProps

Description

Props to be passed to the default components used internally to build the datagrid

Type

DatagridComponentsProps

Default

{}

density

Description

Relative padding of the table cells

Type

enum, one of:
TableDensity.compact
TableDensity.loose
TableDensity.normal

Default

TableDensity.normal

hasHoverStyles

Description

If true, row will be visually highlighted on hover

Type

boolean

Default

false

hasPagination

Description

Pass in false to turn off pagination

Type

boolean

Default

true

hasSquareCorners

Description

If true, the table will have square edges

Type

boolean

Default

false

hasVerticalBorders

Description

If true, columns will have vertical borders

Type

boolean

Default

-

hasZebraStripes

Description

If true, every other row will have a background color

Type

boolean

Default

-

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

minWidth

Description

Minimum width for the table in pixels

Type

number

Default

600

onHeaderSelect

Description

Function called when the checkbox in the table header is clicked on

Type

function

Default

-

onRowSelect

Description

Function called when the checkbox in each table row is clicked on

Type

function

Default

-

onSelectedRowsChange

Description

Function called when the rows selected in the table changes

Type

function

Default

-

onSortBySelected

Description

Function called when the sort button is clicked for selectable tables

Type

function

Default

-

paginationProps

Description

Pagination data used to create the pagination footer. Created using the usePagination hook.

Type

Partial

Default

{}

rowCount

Type

number

Default

-

rows

Required

Description

Row data to be displayed in each row in the table

Type

DatagridRow[]

Default

-

selectedItems

Type

Array

Default

-

sortDirection

Description

Direction by which the selectable column is sorted

Type

enum, one of:
TableSortDirection.ascending
TableSortDirection.descending
TableSortDirection.none

Default

TableSortDirection.none

Controlled props

selectedRows

Description

Array of rows that are selected in the table when component is controlled

Type

function[]

Default

-

Uncontrolled props

defaultSelectedRows

Description

Array of rows that are selected in the table on render when component is uncontrolled

Type

function[]

Default

-

DatagridColumn Props

Any other props supplied will be provided to the wrapping th element.

align

Description

Text alignment of the cell content. Right alignment should be used for numeric values

Type

enum, one of:
TableCellAlign.center
TableCellAlign.inherit
TableCellAlign.justify
TableCellAlign.left
TableCellAlign.right

Default

TableCellAlign.left

field

Required

Description

Unique identifier for each column

Type

string

Default

-

header

Required

Description

Header text for each column

Type

string

Default

-

isRowHeader

Description

Set to true if you want the column to be the header for each row

Type

boolean

Default

false

isSortable

Description

If true, the header will render a button for sorting

Type

boolean

Default

-

onSort

Description

Event that fires when clicking the table header cell sort button

Type

function

Default

-

scope

Description

Direction and range of data cells that are covered by the header cell

Type

enum, one of:
TableHeaderCellScope.col
TableHeaderCellScope.colgroup
TableHeaderCellScope.row
TableHeaderCellScope.rowgroup

Default

TableHeaderCellScope.col

sortDirection

Description

Direction by which the column is sorted

Type

enum, one of:
TableSortDirection.ascending
TableSortDirection.descending
TableSortDirection.none

Default

TableSortDirection.none

width

Description

Width of the component, set by CSS

Type

string | number

Default

auto

DatagridRow Props

Any other props supplied will be provided to the wrapping tr element.

color

Description

The color scheme of the table row, giving contextual meaning to the content

Type

enum, one of:
TableRowColor.danger
TableRowColor.info
TableRowColor.success
TableRowColor.warning

Default

-

id

Required

Description

Unique identifier for each row

Type

string | number

Default

-

isSelectableDisabled

Description

If true, the select box will be disabled

Type

boolean

Default

-

On this page

Deploys by Netlify