import { Notification, KIND } from "baseui/notification";

import Example from "../../components/example";
import Layout from "../../components/layout";
import Exports from "../../components/exports";
import UnstableWarning from "../../components/unstable-warning";
import TableGuideNotification from "../../components/table-guide-notification";

import Overrides from "../../components/overrides";
import * as DataTableExports from "baseui/data-table";

import Basic from "examples/data-table/basic.tsx";
import BatchAction from "examples/data-table/batch-action.tsx";
import RowHeightLineClamp from "examples/data-table/row-height-line-clamp.tsx";
import CustomizedEmptyState from "examples/data-table/customized-empty-state.tsx";
import CustomizedColumnSort from "examples/data-table/customized-column-sort.tsx";
import AccessTableData from "examples/data-table/access-table-data.tsx";

export default Layout;

<TableGuideNotification />

# Data-Table

Displays tabular data for analysis. The component accepts strict column definitions to consistently
render the following data types: categorical (enum), number, boolean, string, and arbitrary content.
To facilitate a rich set of analysis features out-of-the-box, DataTable does not allow for overrides.
If your application relies on rendering a custom table element, you may want to look into Base Web's
other table options: [Table](/components/table) (uses css-flex) or [TableGrid](/components/table-grid)
(uses css-grid) depending on your use-case.

# Examples

<Example title="Basic usage" path="data-table/basic.tsx">
  <Basic />
</Example>

<Example title="Batch Actions" path="data-table/batch-action.tsx">
  <BatchAction />
</Example>

<Example title="Custom Line Height" path="data-table/row-height-line-clamp.tsx">
  <RowHeightLineClamp />
</Example>

<Example
  title="Customized Column Sort"
  path="data-table/customized-column-sort.tsx"
>
  <CustomizedColumnSort />
</Example>

<Example
  title="Customized Empty State"
  path="data-table/customized-empty-state.tsx"
>
  <CustomizedEmptyState />
</Example>

<Example
  title="Imperatively access table data"
  path="data-table/access-table-data.tsx"
>
  <AccessTableData />
</Example>

The `controlRef` prop allows developers to access the current state of data (filtered and
sorted) via the `getRows` method. This can be used to copy the visible state of the table to the
clipboard or download the data to CSV or other formats.

## API

<Exports
  component={DataTableExports}
  title="Data-Table exports"
  path="baseui/data-table"
/>