OLYSENSE Design System

Utilizes TanStack Table to build and render the DataGrid. Please reference the TanStack Table documentation for more information on expanding the Data Table functionality. There is no web component alternative.

The examples provided in this documentation utilize a consistent data structure to demonstrate the various features of the Data Table component. The data is structured as follows:

type AssetCareRecord = {
  id: string,
  device: string,
  name: string,
  status: string,
  status_label: string
}

type AssetCareParentRecord = {
  id: string,
  device: string,
  group?: boolean,
  subRows?: AssetCareRecord[]
}

/* eslint-disable @typescript-eslint/no-explicit-any */
import { OdsDataTable } from '@ods/components/react-alt';

const Example = () => {
  const columns = [
    {
      accessorKey: "device",
      header: "Devices",
      cell: (data: any) => data.getValue(),
      sortingFn: 'alphanumeric'
    },
    {
      accessorKey: "name",
      header: "Name",
      cell: (data: any) => data.getValue(),
      sortingFn: 'alphanumeric'
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: (data: any) => data.getValue(),
      sortingFn: 'alphanumeric'
    }
  ];

  const data = [
    {
      id: '2062982',
      device: 'CF-130I',
      name: 'Colono1',
      status: 'drying',
      status_label: 'Drying: 24 min left',
      location: '--',
    },
    {
      id: '2000185',
      device: 'CF-140I - EMC ',
      name: '140-180-100',
      status: 'washing',
      status_label: 'Last washed: 47 min ago ',
      location: 'Olympus',
    },
    {
      id: '2874488',
      device: 'CF-1T20I',
      name: 'Fiber colonoscope',
      status: 'washing',
      status_label: 'Washing: 04 min left',
      location: 'Olympus',
    },
    {
      id: '2874465',
      device: 'CF-1T22I',
      name: 'Fiber colonoscope',
      status: 'washing',
      status_label: 'Washing: 14 min left',
      location: 'Olympus',
    },
    {
      id: '2874445',
      device: 'CF-1T23I',
      name: 'Fiber colonoscope',
      status: 'washing',
      status_label: 'Washing: 14 min left',
      location: 'Olympus',
    }
  ];

  return (
    <OdsDataTable
      columns={columns}
      data={data}
    />
  )
}

export default Example;

Use the enableRowSelection attribute to enable one or more rows in the Data Table to be selected using a checkbox. The data provided to the Data Table in this example follows the shape defined by the AssetCareRecord type.

Cell renderers are used to format the “Devices” and “Status” columns. Sorting has been enabled using the enableSorting attribute and custom sorting functions defined for the relevant columns.

/* eslint-disable @typescript-eslint/no-explicit-any */
import { OdsDataTable } from '@ods/components/react-alt';
import { ColumnDef } from '@tanstack/react-table';

import { DevicesCellRenderer } from './renderers/devices-cell-renderer';
import { StatusCellRenderer } from './renderers/status-cell-renderer';
import { assetCareData } from './makeData';

const Example = () => {
  const columns: ColumnDef<unknown>[] = [
    {
      accessorKey: "device",
      header: "Devices",
      cell: ({ row, cell }: any) => <DevicesCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.device.localeCompare(rowB.original.device);
      },
      enableResizing: true,
    },
    {
      accessorKey: "name",
      header: "Name",
      cell: (data: any) => data.getValue(),
      sortingFn: 'alphanumeric',
      enableResizing: true
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row, cell }: any) => <StatusCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.status.localeCompare(rowB.original.status);
      },
      enableResizing: true,
      size: 250
    }
  ];

  const handleRowSelectionChange = (selectedRows: any[]) => {
    console.log('Selected Rows: ', selectedRows);
  }

  return (
    <OdsDataTable
      columns={columns}
      data={assetCareData}
      enableRowSelection
      enableSorting
      onRowSelectionChange={handleRowSelectionChange}
    />
  )
}

export default Example;

Pagination

This example demonstrates how to implement pagination in a Data Table using the enablePagination attribute. It includes features such as navigating between pages, selecting the number of rows per page, and displaying the current page information.

/* eslint-disable @typescript-eslint/no-explicit-any */
import { OdsDataTable } from '@ods/components/react-alt';
import { ColumnDef } from '@tanstack/react-table';

import { DevicesCellRenderer } from './renderers/devices-cell-renderer';
import { StatusCellRenderer } from './renderers/status-cell-renderer';
import { assetCareData } from './makeData';

const Example = () => {
  const columns: ColumnDef<unknown>[] = [
    {
      accessorKey: "device",
      header: "Devices",
      cell: ({ row, cell }: any) => <DevicesCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.device.localeCompare(rowB.original.device);
      },
      enableResizing: true,
    },
    {
      accessorKey: "name",
      header: "Name",
      cell: (data: any) => data.getValue(),
      sortingFn: 'alphanumeric',
      enableResizing: true
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row, cell }: any) => <StatusCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.status.localeCompare(rowB.original.status);
      },
      enableResizing: true,
      size: 250
    }
  ];

  const handleRowSelectionChange = (selectedRows: any[]) => {
    console.log('Selected Rows: ', selectedRows);
  }

  return (
    <OdsDataTable
      columns={columns}
      data={assetCareData}
      enableRowSelection
      enableSorting
      enablePagination
      onRowSelectionChange={handleRowSelectionChange}
    />
  )
}

export default Example;

This example demonstrates the use of a custom cell renderer that adds an actions menu to each row in the Data Table. The actions menu provides options for interacting with the data in that row.

/* eslint-disable @typescript-eslint/no-explicit-any */
import { OdsDataTable } from '@ods/components/react-alt';
import { ColumnDef } from '@tanstack/react-table';

import { DevicesCellRenderer } from './renderers/devices-cell-renderer';
import { StatusCellRenderer } from './renderers/status-cell-renderer';
import { ActionsMenuCellRenderer } from './renderers/actions-menu-cell-renderer';
import { assetCareData } from './makeData';

const Example = () => {
  const columns: ColumnDef<unknown>[] = [
    {
      accessorKey: "device",
      header: "Devices",
      cell: ({ row, cell }: any) => <DevicesCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.device.localeCompare(rowB.original.device);
      },
      enableResizing: true,
    },
    {
      accessorKey: "name",
      header: "Name",
      cell: (data: any) => data.getValue(),
      sortingFn: 'alphanumeric',
      enableResizing: true
    },
    {
      accessorKey: "status",
      header: "Status",
      cell: ({ row, cell }: any) => <StatusCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.status.localeCompare(rowB.original.status);
      },
      enableResizing: true,
      size: 250
    },
    {
      id: 'actions',
      cell: ({ row, cell }: any) => {
        return <ActionsMenuCellRenderer row={row} cell={cell} callback={(row: any, selectedItem: any) => alert(`You clicked on "${selectedItem.value.charAt(0).toUpperCase() + selectedItem.value.slice(1)}" for Device: ${row?.original.device}`)} />
      },
      enableResizing: false,
      size: 50
    }
  ];

  return (
    <OdsDataTable
      columns={columns}
      data={assetCareData}
      enableSorting
    />
  )
}

export default Example;

Use the enableExpanding attribute to enable one or more rows in the Data Table to be selected using a checkbox. The data provided to the Data Table in this example follows the shape defined by the AssetCareParentRecord type.

/* eslint-disable @typescript-eslint/no-explicit-any */
import { OdsDataTable } from '@ods/components/react-alt';
import { createColumnHelper, ColumnDef } from '@tanstack/react-table';
import { DevicesCellRenderer } from './renderers/devices-cell-renderer';
import { StatusCellRenderer } from './renderers/status-cell-renderer';
import { ActionsCellRenderer } from './renderers/actions-cell-renderer';
import { expandingData, type AssetCareRecord } from './makeData';

const columnHelper = createColumnHelper<AssetCareRecord>()

const Example = () => {
  const columns = [
    columnHelper.accessor("device", {
      header: "Devices",
      cell: ({ row, cell }: any) => <DevicesCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.device.localeCompare(rowB.original.device);
      },
      enableResizing: true,
    }),
    columnHelper.accessor("name", {
      header: "Name",
      cell: (data: any) => data.getValue(),
      sortingFn: 'alphanumeric',
      enableResizing: true
    }),
    columnHelper.accessor("status", {
      header: "Status",
      cell: ({ row, cell }: any) => <StatusCellRenderer row={row} cell={cell} />,
      sortingFn: (rowA: any, rowB: any) => {
        return rowA.original.status.localeCompare(rowB.original.status);
      },
      enableResizing: true,
      size: 250
    }),
    columnHelper.display({
      id: 'actions',
      cell: ({ row, cell }: any) => {
        return <ActionsCellRenderer row={row} cell={cell} callback={(row: any) => alert(`You clicked on device: ${row?.original.device}`)} />
      },
      enableResizing: false,
      size: 50
    })
  ];

  return (
    <OdsDataTable
      columns={columns as ColumnDef<unknown>[]}
      data={expandingData}
      enableSorting
      enableExpanding
    />
  )
}

export default Example;

You can create custom cell renderers to format the data in a cell. Below are two examples of custom cell renderers uses by the Data Tables above.

import { Row, Cell } from '@tanstack/react-table';

type CellRenderer = {
  cell?: Cell<any, unknown>;
  row?: Row<any>;
}

// For demo purposes only - normally you would import these styles from a CSS/SCSS file
const css = `
  .devices-expanded-cell {
      display: flex;
      align-items: center;
      gap: var(--ods-sys-space-8);
      font-weight: var(--ods-sys-font-weight-semibold);
  }

  .devices-collapsed-cell {
      font-weight: var(--ods-sys-font-weight-semibold);
  }
`

export const DevicesCellRenderer = ({ row, cell }: CellRenderer) => {
  if (!row?.original.subRows) {
    return (
      <div>
        <div className='devices-expanded-cell'>
          {row?.original.device}
        </div>
        <div>
          {row?.original.id}
        </div>

        <style>
          {css}
        </style>
      </div>
    )
  }

  return (
    <>
      <style>
        {css}
      </style>

      <span className='devices-collapsed-cell'>
        {cell?.getContext().getValue() as string}
      </span>
    </>
  );
}

import { OdsTag } from '@ods/components/react.tag';
import { OdsIcon } from '@ods/components/react.icon';
import { Row, Cell } from '@tanstack/react-table';

// For demo purposes only - normally you would import these styles from a CSS/SCSS file
const css = `
  .status-container {
      display: flex;
      align-items: center;
      gap: var(--ods-sys-space-8);
  }
`
type CellRenderer = {
  cell?: Cell<any, unknown>;
  row?: Row<any>;
}

export const StatusCellRenderer = ({ row, cell }: CellRenderer) => {
  const statusMap = {
    'washing': <OdsTag variant="success"><OdsIcon className="text-md" name="droplet"></OdsIcon></OdsTag>,
    'drying': <OdsTag variant='primary' size='small'><OdsIcon className="text-md" name="droplet"></OdsIcon></OdsTag>
  }

  if (row?.original.subRows) {
    return;
  }

  return (
    <>
      <style>
        {css}
      </style>

      <div className='status-container'>{statusMap['washing']} {row?.original.status_label}</div>
    </>
  )
}

import { OdsIconButton } from '@ods/components/react.icon-button';
import { Row, Cell } from '@tanstack/react-table';


type CellRenderer = {
  cell?: Cell<any, unknown>;
  row?: Row<any>;
  callback?: (row: Row<any> | any) => void;
}

// For demo purposes only - normally you would import these styles from a CSS/SCSS file
const css = `
  .data-table__action-button-container {
    display: flex;
    justify-content: center;
  }

  #data-table__icon-button::part(base) {
    color: var(--ods-sys-color-accent);
  }
`

export const ActionsCellRenderer = ({ row, cell, callback }: CellRenderer) => {
  console.log('row', row);
  console.log('cell', cell);

  function onClickHandler(event: React.MouseEvent): void {
    event.stopPropagation();

    if (callback) {
      callback(row);
    }
  }

  return (
    <div className='data-table__action-button-container'>
      <style>
        {css}
      </style>

      {!row?.original.group ? <OdsIconButton id='data-table__icon-button' variant="ghost" name="chevron-right" size='small' onClick={onClickHandler}></OdsIconButton> : null}
    </div>
  )
}

import { OdsDropdown } from '@ods/components/react.dropdown';
import { OdsDivider } from '@ods/components/react.divider';
import { OdsIconButton } from '@ods/components/react.icon-button';
import { OdsMenu, OdsSelectEvent } from '@ods/components/react.menu';
import { OdsMenuItem } from '@ods/components/react.menu-item';
import { Row, Cell } from '@tanstack/react-table';

type CellRenderer = {
  cell?: Cell<any, unknown>;
  row?: Row<any>;
  callback?: (row: Row<any> | any, selectedItem: any) => void;
}

export const ActionsMenuCellRenderer = ({ row, callback }: CellRenderer) => {
  function handleSelect(event: OdsSelectEvent & { detail: { item: any } }) {
    const selectedItem = event.detail.item;

    if (callback) {
      callback(row, selectedItem);
    }
  }

  return (
    <div>
      <OdsDropdown>
        <OdsIconButton slot="trigger" variant="ghost" name="more-horiz" size='small'></OdsIconButton>
        <OdsMenu onOdsSelect={handleSelect}>
          <OdsMenuItem value='view'>View</OdsMenuItem>
          <OdsMenuItem value='edit'>Edit</OdsMenuItem>
          <OdsDivider></OdsDivider>
          <OdsMenuItem value='delete'>Delete</OdsMenuItem>
        </OdsMenu>
      </OdsDropdown>
    </div>
  )
}

Importing

Usage

This section includes guidelines for designers and developers about the usage of this component in different contexts.

Data Table

About Examples Data

Examples

Basic

Row Selection

Actions Menu

Row Expanding

Cell Renderers

Devices Cell Renderer

Status Cell Renderer

Actions Cell Renderer

Actions Menu Cell Renderer

Importing

Usage