npm package: @highlight-ui/table
Description: Table component for Highlight UI
Author: Personio GmbH & Co. KG
Latest version: 4.3.8

[![npm](https://img.shields.io/npm/v/@highlight-ui/table)](https://www.npmjs.com/package/@highlight-ui/table)
[![personio.design](https://img.shields.io/static/v1?label=Personio&message=zeroheight&color=yellow)](https://www.personio.design/40d648a47/p/61953e-table/b/61d4aa)
[![storybook.personio.design](https://img.shields.io/static/v1?label=Personio&message=storybook&color=red)](https://storybook.personio.design/?path=/story/content-structure-table--table-story)

# @highlight-ui/table

Using npm:

```bash
npm install @highlight-ui/table
```

Using yarn:

```bash
yarn add @highlight-ui/table
```

Using pnpm:

```bash
pnpm install @highlight-ui/table
```

In your (S)CSS file:

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

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

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

## Usage

```tsx
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](https://gitlab.personio-internal.de/personio/platform/highlight-ui/-/blob/master/packages/ui/table/src/types.ts?ref_type=heads)

## Contributing 🖌️

Please visit [personio.design](https://www.personio.design/40d648a47/p/61953e-table/b/61d4aa) for usage guidelines and visual examples.

If you're interested in contributing, please visit our [contribution page](https://www.personio.design/40d648a47/v/0/p/138faf-about-the-process).