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

import * as TableExports from "baseui/table";

import Basic from "examples/table/basic.tsx";
import Cells from "examples/table/cells.tsx";
import Pagination from "examples/table/pagination.tsx";
import FixedWidthColumn from "examples/table/fixed-width-column.tsx";
import VerticalScroll from "examples/table/vertical-scroll.tsx";
import HorizontalScroll from "examples/table/horizontal-scroll.tsx";
import Sortable from "examples/table/sortable.tsx";
import Filter from "examples/table/filter.tsx";
import Graph from "examples/table/graph.tsx";
import Virtual from "examples/table/virtual.tsx";
import VirtualHorizontal from "examples/table/virtual-horizontal-scroll.tsx";

import Yard from "../../components/yard/index";
import tableYardConfig from "../../components/yard/config/table";

export default Layout;

<TableGuideNotification />

# Table

<Yard placeholderHeight={202} {...tableYardConfig} />

Display larger amounts of information in a scannable UI. This component is best suited for
applications that need to support older browsers like Internet Explorer. It is implemented with
[flex-box](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox).
If your application does not need legacy support, you may want to explore baseui's [table-grid](/components/table-grid),
components, a visually similar table, but implemented with [css-grid](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout).

## Examples

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

<Example title="Table cell examples" path="table/cells.tsx">
  <Cells />
</Example>

<Example title="Table with pagination" path="table/pagination.tsx">
  <Pagination />
</Example>

<Example title="Table with sorting by a column" path="table/sortable.tsx">
  <Sortable />
</Example>

<Example
  title="Table with fixed width column"
  path="table/fixed-width-column.tsx"
>
  <FixedWidthColumn />
</Example>

<Example title="Table with vertical scroll" path="table/vertical-scroll.tsx">
  <VerticalScroll />
</Example>

<Example
  title="Table with horizontal scroll"
  path="table/horizontal-scroll.tsx"
>
  <HorizontalScroll />
</Example>

<Example title="Table with column filtering" path="table/filter.tsx">
  <Filter />
</Example>

<Example
  title="Using react-vis"
  path="table/graph.tsx"
  additionalPackages={{ "react-vis": "1.11.6" }}
>
  <Graph />
</Example>

## Virtualized Table

If your product requires infinite scroll functionality rather than pagination, take a look at the
examples below for how to integrate `react-virtualized` with the table component. Base Web does not
contain `react-virtualized` internally. You will need to install it yourself.

<Example
  title="Table with virtualized table body"
  path="table/virtual.tsx"
  additionalPackages={{ "react-virtualized": "^9.21.0" }}
>
  <Virtual />
</Example>

<Example
  title="Table with virtualized horizontal scroll"
  path="table/virtual-horizontal-scroll.tsx"
  additionalPackages={{ "react-virtualized": "^9.21.0" }}
>
  <VirtualHorizontal />
</Example>

<Exports component={TableExports} title="Table exports" path="baseui/table" />