# Table

## Basic usage

```js
const items = ipsum.list(5, () => ({ name: ipsum.name(), desc: ipsum.text() }));

return <SilkeTable items={items} columns={['name', 'desc']} />;
```

## Fixed column width

```js
const items = ipsum.list(5, () => ({
  name: ipsum.name(),
  surname: ipsum.name(),
  gender: ipsum.name(),
}));

return <SilkeTable fixedColumns items={items} columns={['name', 'surname', 'gender']} />;
```

## Advanced usage with column transform

```js
() => {
  const items = ipsum.list(5, () => ({
    name: ipsum.name(),
    role: Math.round(Math.random()),
    desc: ipsum.text(),
  }));
  const [_selected, setSelected] = React.useState();

  const columns = [
    {
      label: 'Name',
      attr: 'name',
    },
    {
      label: 'Role',
      attr: 'role',
      // Transforming the role column with transform function
      transform: (value) => (value === 1 ? 'Admin' : 'Not admin'),
    },
    {
      label: 'Description',
      attr: 'desc',
    },
  ];

  return <SilkeTable items={items} columns={columns} onSelect={(item) => setSelected(item)} />;
};
```

## Load more Table with overflow menu

```js
const [count, setCount] = React.useState(5);
const items = ipsum.list(count, () => ({
  name: ipsum.name(),
  desc: ipsum.text(),
}));
const menu = ipsum.list(5, () => ({
  label: ipsum.name(),
  onClick: (item) => console.log(item),
}));

return (
  <SilkeTable
    items={items}
    fixedColumns
    columns={['name', 'desc']}
    menu={menu}
    onLoadMore={() => sleep(2000).then(() => setCount(count + 5))}
  />
);
```

### Table with simple toolbar and search

The SilkeTable `search` prop can be used to fast filter the table, but remember it can only search table cells where the value is a string

```js
const [search, setSearch] = React.useState('');
const items = ipsum.list(5, () => ({ name: ipsum.name(), desc: ipsum.text() }));
const selectItems = ipsum.list((value) => ({ value, label: ipsum.name(1) }));

return (
  <SilkeTable items={items} fixedColumns columns={['name', 'desc']} search={search}>
    <SilkeSelectField label="Test" value={0} width={140} items={selectItems} />
    <SilkeSearchField flex placeholder="Search for column values" onChange={setSearch} />
    <SilkeButton icon="add" label="Add to list" />
  </SilkeTable>
);
```

### Table with multiselect

The SilkeTable `search` prop can be used to fast filter the table, but remember it can only search table cells where the value is a string

```js
const [search, setSearch] = React.useState('');
const [selected, setSelected] = React.useState([]);
const items = ipsum.list(5, () => ({
  name: ipsum.name(),
  desc: ipsum.name(4),
}));

const selectItems = ipsum.list((value) => ({ value, label: ipsum.name(1) }));
return (
  <SilkeTable
    multiselect
    items={items}
    columns={['name', 'desc']}
    search={search}
    selected={selected}
    onSelect={setSelected}
  >
    {selected.length ? (
      <>
        {selected.length} items selected
        <Flex />
        <SilkeButton label="Deselect" onClick={() => setSelected([])} />
      </>
    ) : (
      <>
        <SilkeSelectField label="Test" value={0} width={140} items={selectItems} />
        <SilkeSearchField flex placeholder="Search for column values" onChange={setSearch} />
        <SilkeButton icon="add" label="Add to list" />
      </>
    )}
  </SilkeTable>
);
```

## Table with components as a headers/cells

```js
const items = ipsum.list(5, () => ({
  name: ipsum.name(),
  description: <SilkeButton label="Click me" />,
}));
const columns = [
  {
    attr: "name",
    label: "Name",
    component: <SilkeTextField value="Default name" />,
  },
  {
    attr: "description",
    label: "Description",
    component: <SilkeTextField value="Default description" />,
  },
];

<SilkeTable items={items} columns={columns} />;
```