<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 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}/>
        <Ajax />
        <Basic />
        <Bordered />
        <ColspanRowspan />
        <CustomFilterPanel />
        <EditCell />
        <EditRow />
        <ExpandChildren />
        <Expand />
        <FixedColumnsHeader />
        <FixedColumns />
        <FixedHeader />
        <GroupingColumns />
        <Head />
        <NestedTable />
        <ResetFilter />
        <RowSelectionAndOperation />
        <RowSelectionCustom />
        <RowSelection />
        <Size />
        <Template />
        <api>
          <template slot='cn'>
            <CN/>
          </template>
          <US/>
        </api>
      </div>
    )
  },
}
</script>