OLYSENSE Design System

Utilizes the Lit Adaptor provided by TanStack Table to build and render the table.

<ods-table id="demo-table"></ods-table>

<script>
  const demoTable = document.querySelector('#demo-table');

  demoTable.columns = [
    {
      accessorKey: "prefix",
      header: "Prefix",
      cell: (data) => data.getValue(),
    },
    {
      accessorKey: "firstName",
      header: "First Name",
      cell: (data) => data.getValue(),
    },
    {
      accessorKey: "lastName",
      header: "Last Name",
      cell: (data) => data.getValue(),
    },
  ];

  demoTable.data = [
    {
      prefix: 'Dr',
      firstName: 'Jane',
      lastName: 'Doe'
    },
    {
      prefix: 'Dr',
      firstName: 'John',
      lastName: 'Doe'
    }
  ];
</script>

import { OdsTable } from '@ods/components/react.table';

const Example = () => {
  const columns = [
    {
      accessorKey: "prefix",
      header: "Prefix",
      cell: (data: any) => data.getValue(),
    },
    {
      accessorKey: "firstName",
      header: "First Name",
      cell: (data: any) => data.getValue(),
    },
    {
      accessorKey: "lastName",
      header: "Last Name",
      cell: (data: any) => data.getValue(),
    },
  ];

  const data = [
    {
      prefix: 'Dr',
      firstName: 'Jane',
      lastName: 'Doe'
    },
    {
      prefix: 'Dr',
      firstName: 'John',
      lastName: 'Doe'
    }
  ];

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

export default Example;

Importing

import '@ods/components/web.table';

Note: You only need to import a web component once in your code, as it registers itself globally when defined, allowing you to use it anywhere within your application without needing to re-import it each time you want to use the component.

Properties

Please note, both DOM properties and HTML attributes are shown in the table below. Unless otherwise specified, the property and attribute names are identical.

Property/Attribute	Reflects	Type	Default
columns		ColumnDef<unknown, any>[]	[]
data		RowData[]	[]

Parts

Name	Description
base	The table component's base wrapper.
header	The table component's header wrapper.
header-row	The table component's header row wrapper.
body	The table component's body wrapper.

Table

Examples

Basic

Importing

Properties

Parts