@highlight-ui/table NPM | npm.io

4.3.4 • Published 3 months ago

Install

Weekly downloads

-

License

MIT

Repository

Last release

3 months ago

@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.

@highlight-ui/utils-commons lodash.debounce lodash.times

@infinitebrahmanuniverse/nolb-_hig @everything-registry/sub-chunk-395 @zalastax/nolb-_hig

3 months ago

5 months ago

8 months ago

10 months ago

10 months ago

7 months ago

7 months ago

7 months ago

9 months ago

8 months ago

8 months ago

8 months ago

9 months ago

9 months ago

8 months ago

7 months ago

7 months ago

7 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

10 months ago

10 months ago

9 months ago

7 months ago

12 months ago

12 months ago

12 months ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago