Version:

Install ​

shell
npm i @mate-react/grid

Import ​

tsx
import { MateGrid, MateGridSortColumn } from '@mate-react/grid';

Variants ​

Default ​

tsx
<MateGrid items={items}>
  <MateGridSortColumn path="name" header="Name" />
  <MateGridSortColumn path="score" header="Score" />
  <MateGridSortColumn path="text" header="Text" />
</MateGrid>

Multi Select ​

tsx
<MateGrid items={items} multiSelect theme="column-borders">
  <MateGridSortColumn path="name" header="Name" />
  <MateGridSortColumn path="score" header="Score" />
</MateGrid>

With Action Column ​

tsx
<MateGrid
  items={items}
  primaryActionColumnProvider={item => ({
    tooltipText: `Actions for ${item.name}`,
    children: [{ text: 'Edit' }, { text: 'Delete' }]
  })}
>
  <MateGridSortColumn path="name" header="Name" />
  <MateGridSortColumn path="score" header="Score" />
</MateGrid>