import { CodeBlock, ConfigBlock } from "@src/helpers/DocBlocks";
import Table from "./Table";
import { DATA } from "./Table.storybook.js";

# Table

> A clickable UI element with active and hover states. Indicates to the user that it's clickable.

<CodeBlock defaultValue="bots">
  <Table
    sortable
    sortKey="title"
    sortOrder={-1}
    columns={DATA.columns}
    rows={DATA.data}
  />
</CodeBlock>

## Configuration

<ConfigBlock of={Table} />

## Clickable

<CodeBlock defaultValue="bots">
  {() => {
    const [activeIndex, setActiveIndex] = React.useState(-1);
    return (
      <Table
        sortable
        sortKey="title"
        sortOrder={-1}
        columns={DATA.columns}
        rows={DATA.data}
        onRowClick={(index, row) => setActiveIndex(index)}
        activeIndex={activeIndex}
        highlightActiveRow
      />
    );
  }}
</CodeBlock>

## Examples

<CodeBlock title="Virtual Scrolling" defaultValue="bots">
  <Table
    sortable
    sortKey="title"
    sortOrder={-1}
    columns={DATA.columns}
    rows={[...DATA.data, ...DATA.data, ...DATA.data, ...DATA.data]}
    virtual
    rowHeight={32}
    height={300}
  />
</CodeBlock>