@highlight-ui/table

Using npm:

npm install @highlight-ui/table

Using yarn:

yarn add @highlight-ui/table

Using pnpm:

pnpm install @highlight-ui/table

In your (S)CSS file:

@import url('@highlight-ui/table');

Once the package is installed, you can import the library:

import { Table } from '@highlight-ui/table';

Usage

import React from 'react';
import { Table } from '@highlight-ui/table';

export default function TableExample() {
  return (
    <Table
      columns={[
        { key: 'firstName', label: 'First Name' },
        { key: 'lastName', label: 'Last Name' },
      ]}
      data={[
        {
          firstName: 'Alan',
          lastName: 'Foster',
        },
        {
          firstName: 'Sebastian',
          lastName: 'Meyer',
        },
        {
          firstName: 'Patrick',
          lastName: 'Wagner',
        },
      ]}
    />
  );
}

Props 📜

| Prop | Type | Required | Default | Description | | :----------------- | :---------------------------- | :------- | :-------- | :------------------------------------------------------------------------------------ | | columns | TableColumnDefinition[] | No | | An array of TableColumnDefinition objects that define how to render columns | | data | TDataRow[] | No | | An array of TDataRow objects that specify data for the table | | fixedColumnCount | number | No | 0 | Define how many fixed columns you need in the table | | fixedHeader | boolean | No | false | Specify if the header should be fixed when scrolling | | theme | 'light', 'default' | No | default | Can be used to specify the theme. | | renderTd | TableCellRenderer<TDataRow> | No | | Can be used to provide a custom render function for all the data cells in the table | | renderTh | TableHeadCellRenderer | No | | Can be used to provide a custom render function for all the header cells in the table | | renderTr | TableRowRenderer<TDataRow> | No | | Can be used to provide a custom render function for all the rows in the table |

Custom types 🔠

All custom types can be found here

Contributing 🖌️

Please visit personio.design for usage guidelines and visual examples.

If you're interested in contributing, please visit our contribution page.