<script>
import Ajax from './ajax.md';
import Basic from './basic.md';
import Bordered from './bordered.md';
import ColspanRowspan from './colspan-rowspan.md';
import CustomFilterPanel from './custom-filter-panel.md';
import EditCell from './edit-cell.md';
import EditRow from './edit-row.md';
import ExpandChildren from './expand-children.md';
import Expand from './expand.md';
import FixedColumnsHeader from './fixed-columns-header.md';
import FixedColumns from './fixed-columns.md';
import FixedHeader from './fixed-header.md';
import GroupingColumns from './grouping-columns.md';
import Head from './head.md';
import NestedTable from './nested-table.md';
import ResetFilter from './reset-filter.md';
import RowSelectionAndOperation from './row-selection-and-operation.md';
import RowSelectionCustom from './row-selection-custom.md';
import RowSelection from './row-selection.md';
import Size from './size.md';
import Template from './template.md';
import ResizableColumn from './resizable-column';
import ResizableColumnString from '!raw-loader!./resizable-column';
import Ellipsis from './ellipsis';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';

const md = {
  cn: `# Table 表格

    展示行列数据。

## 何时使用

- 当有大量结构化的数据需要展现时;
- 当需要对数据进行排序、搜索、分页、自定义操作等复杂行为时。

## 如何使用

指定表格的数据源 \`dataSource\` 为一个数组。
    ## 代码演示`,
  us: `# Table

    A table displays rows of data.

## When To Use

- To display a collection of structured data.
- To sort, search, paginate, filter data.

## How To Use

Specify \`dataSource\` of Table as an array of data.
## Examples
`,
};
export default {
  category: 'Components',
  cols: 1,
  type: 'Data Display',
  title: 'Table',
  subtitle: '表格',
  render() {
    return (
      <div>
        <md cn={md.cn} us={md.us} />
        <demo-sort cols={1}>
          <Basic />
          <Ellipsis />
          <Ajax />
          <Bordered />
          <ColspanRowspan />
          <CustomFilterPanel />
          <EditCell />
          <EditRow />
          <ExpandChildren />
          <Expand />
          <FixedColumnsHeader />
          <FixedColumns />
          <FixedHeader />
          <GroupingColumns />
          <Head />
          <NestedTable />
          <ResetFilter />
          <RowSelectionAndOperation />
          <RowSelectionCustom />
          <RowSelection />
          <Size />
          <Template />
          <demo-container code={ResizableColumnString}>
            <ResizableColumn />
          </demo-container>
        </demo-sort>
        <api>
          <template slot="cn">
            <CN />
          </template>
          <US />
        </api>
      </div>
    );
  },
};
</script>