semi-design/packages/semi-ui/table/_story/table.stories.js

import React from 'react';

import { Table } from '@douyinfe/semi-ui';

import JSXColumnsSimple from './JSXColumnsSmiple';
import JSXColumnsComplex from './JSXColumnsComplex';
import JSXColumnPropColumn from './JSXColumnPropColumn';

import ResizableColumns from './ResizableColumns';
import DragableTableDemo from './DragableTable';
import DynamicTableDemo from './DynamicTable';
import LinkedScroll from './LinkedScroll';
import ModalTable from './ModalTable';
import TabsTable from './TabsTable';
import EventTable from './EventTable';
import FnTable from './FnTable';
import DynamicFilters from './DynamicFilters';
import ResizableTable from './ResizableTable';
import ExpandDemo from './Expand';
import PaginationDemo from './PagintaionTable';
import SelectedRowsDemo from './SelectedRows';
import ChildrenData from './ChildrenData';
import ChildrenDataSelected from './ChildrenDataSelected';
import FixedExpandedRows from './FixedExpandedRows';
import FixedTable from './FixedTable';
import JSXFixedTable from './JSXFixedTable';
import JSXTitles from './JSXTitles';
import CustomFilterDropdownItem from './CustomFilterDropdownItem';
import VirtualizedDemo from './virtualized';
import VirtualizedNotFixed from './VirtualizedNotFixed';
import InfiniteScroll from './InfiniteScroll';
import VirtualTableOnCell from './VirtualTableOnCell';
import {
  ControlledSelection,
  PerfComplexRender,
  PerfContext,
  PerfOnRow,
  PerfRender,
  PerfResizableSelection,
  PerfVirtualized,
} from './Perf';
import RenderPagination from './RenderPagination';
import ControlledSortOrder from './ControlledSortOrder';
import FilterWithNewDataTable from './FilterWithNewDataTable';
import ExpandAllRows from './ExpandAllRows';
import ExpandAllGroupRows from './ExpandAllGroupRows';
import ExpandRowByClick from './ExpandRowByClick';
import FixAllColumnsWithoutWidth from './FixAllColumnsWithoutWidth';

export default {
  title: 'Table'
}

export { default as WithSideSheet } from './WithSideSheet';
export { default as InSideSheet } from './InSideSheet';
export { default as GroupedCols } from './GroupedCols';
export { default as GroupedColsFixed } from './GroupedColsFixed';
export { default as GroupedColsFixedJSX } from './GroupedColsFixedJSX';
export { default as GroupedColsFixedVirtualized } from './GroupedColsFixedVirtualized';
export { default as GroupedColsFixedVirtualizedGroups } from './GroupedColsFixedVirtualizedGroups';
export { default as GroupedRows } from './GroupedRows';
export { default as GroupedRowsFixed } from './GroupedRowsFixed';
export { default as FixedGroups } from './FixedGroups';
export { default as CustomComponents } from './CustomComponents';
export { default as CustomExpandIcons } from './CustomExpandIcons';
export { default as VirtualizedFixedDemo } from './virtualizedFixed';
export { default as VirtualizedGroupedRows } from './VirtualizedGroupedRows';
export { default as VirtualizedDataSelected } from './VritualizedDataSelected';
export { default as VirtualizedDynamicData } from './VirtualizedDynamicData';
export { default as MassiveColumns } from './MassiveColumns';
export { default as ControlledPagination } from './ControlledPagination';
export { default as FulldRenderDemo } from './FullRender';
export { RTLAlignScrollBar } from './RTL';
export { default as JSXAsyncData } from './JSXAsyncData';
export { default as ScrollBar } from './ScrollBar';
export { default as TableSpan } from './TableSpan';
export { default as FixRenderReturnProps } from './FixRenderReturnProps';
export { default as WarnColumnWithoutDataIndex } from './WarnColumnWithoutDataIndex';
export { default as FixedColumnsChange } from './v2/FixedColumnsChange';
export { default as FixedZIndex } from './v2/FixedZIndex';
export { default as FixedHeaderMerge } from './v2/FixedHeaderMerge';

// empty table

const emptyColumn = [
  {
    title: 'Name',
    dataIndex: 'name',
    fixed: 'left',
    render: text => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
  },
];
const emptyData = [];

export const EmptyTable = () => <Table autoWidth columns={emptyColumn} dataSource={emptyData} />;

EmptyTable.story = {
  name: 'empty table',
};

// basic table

const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    width: '30%',
    render: text => <a>{text}</a>,
  },
  {
    title: 'combine',
    width: '20%',
    dataIndex: 'test',
    children: [
      {
        title: 'Age',
        width: '20%',
        children: [
          {
            title: 'Age1',
            width: '20%',
            dataIndex: 'age1',
          },
          {
            title: 'Age2',
            width: '20%',
            dataIndex: 'age2',
          },
        ],
      },
      {
        title: 'Key',
        width: '20%',
        dataIndex: 'key',
      },
    ],
  },
  {
    title: 'Address',
    width: '50%',
    dataIndex: 'address',
  },
];
const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    age1: 23,
    age2: 11,
    address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    age1: 23,
    age2: 11,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    age1: 23,
    age2: 11,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Disabled User',
    age: 99,
    age1: 23,
    age2: 11,
    address: 'Sidney No. 1 Lake Park',
  },
];

export const BasicTable = () => <Table columns={columns} dataSource={data} />;

BasicTable.story = {
  name: 'basic table',
};

export const SimpleJsx = () => <JSXColumnsSimple />;

SimpleJsx.story = {
  name: 'simple jsx',
};

export const ComplexJsx = () => <JSXColumnsComplex />;

ComplexJsx.story = {
  name: 'complex jsx',
};

ComplexJsx.parameters = {
  chromatic: { disableSnapshot: true },
}

// selection table

// rowSelection object indicates the need for row selection
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    // console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: record => ({
    disabled: record.name === 'Disabled User', // Column configuration not to be checked
    name: record.name,
  }),
};
export const FilterAndUpdateDataSource = () => <FilterWithNewDataTable />;

FilterAndUpdateDataSource.story = {
  name: 'filter and update dataSource',
};

export const SelectionTable = () => (
  <Table rowSelection={rowSelection} columns={columns} dataSource={data} />
);

SelectionTable.story = {
  name: 'selection table',
};

function ControlledSelectionTable() {
  const [selected, setSelected] = React.useState([]);
  const columns = [
    {
      title: 'Name',
      dataIndex: 'name',
      render: text => text,
    },
    {
      title: 'Age',
      dataIndex: 'age',
    },
    {
      title: 'Address',
      dataIndex: 'address',
    },
  ];
  const data = [
    {
      key: '1',
      name: 'John Brown',
      age: 32,
      address: 'New York No. 1 Lake Park, New York No. 1 Lake Park',
    },
    {
      key: '2',
      name: 'Jim Green',
      age: 42,
      address: 'London No. 1 Lake Park',
    },
    {
      key: '3',
      name: 'Joe Black',
      age: 32,
      address: 'Sidney No. 1 Lake Park',
    },
    {
      key: '4',
      name: 'Michael James',
      age: 99,
      address: 'Sidney No. 1 Lake Park',
    },
  ];
  const rowSelection = {
    onChange: (selectedRowKeys, selectedRows) => {
      setSelected(selectedRowKeys);
    },
    getCheckboxProps: record => ({
      disabled: selected.length === 2 && selected.findIndex(key => key === record.key) === -1, // Column configuration not to be checked
      name: record.name,
    }),
    selectedRowKeys: selected,
  };
  return (
    <Table columns={columns} dataSource={data} rowSelection={rowSelection} pagination={false} />
  );
}

export const _ControlledSelectionTable = () => <ControlledSelectionTable />;

_ControlledSelectionTable.story = {
  name: 'controlled selection table',
};
_ControlledSelectionTable.parameters = {
  chromatic: { disableSnapshot: true },
}

// sortable table

const sortColumns = [
  {
    title: 'Name',
    dataIndex: 'name',
    filters: [
      {
        text: 'XiaoMing',
        value: 'XiaoMing',
      },
      {
        text: 'ZhangSan',
        value: 'ZhangSan',
      },
      {
        text: 'SubMenu',
        value: 'SubMenu',
        children: [
          {
            text: 'Yellow',
            value: 'Yellow',
          },
          {
            text: 'Pink',
            value: 'Pink',
          },
        ],
      },
    ],
    onFilter: (value, record) => record.name.indexOf(value) === 0,
    sorter: (a, b) => a.name.length - b.name.length,
    sortDirections: ['descend'],
    sortOrder: 'descend',
  },
  {
    title: 'Age',
    dataIndex: 'age',
    defaultSortOrder: 'descend',
    sorter: (a, b) => a.age - b.age,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    filters: [
      {
        text: 'BieJing',
        value: 'BeiJing',
      },
      {
        text: 'ShangHai',
        value: 'SHangHai',
      },
    ],
    filterMultiple: false,
    onFilter: (value, record) => record.address.indexOf(value) === 0,
    sorter: (a, b) => a.address.length - b.address.length,
    sortDirections: ['descend', 'ascend'],
  },
];

const sortData = [
  {
    key: '1',
    name: 'ZhangSan',
    age: 50,
    address: 'BeiJing No.1 High School',
  },
  {
    key: '2',
    name: 'LiSi',
    age: 60,
    address: 'BeiJing No.2 High School',
  },
  {
    key: '3',
    name: 'WangWu',
    age: 20,
    address: 'BeiJing No.3 High School',
  },
  {
    key: '4',
    name: 'XiaoMing',
    age: 30,
    address: 'BeiJing No.5 High School',
  },
];

export const SortTable = () => <Table columns={sortColumns} dataSource={sortData} />;

SortTable.story = {
  name: 'sort table',
};

export const ControlledSortOrderTable = () => <ControlledSortOrder />;

ControlledSortOrderTable.story = {
  name: 'controlled sortOrder table',
};

export const MiddleTable = () => <Table columns={columns} dataSource={data} size="middle" />;

MiddleTable.story = {
  name: 'middle table',
};

export const SmallTable = () => <Table columns={columns} dataSource={data} size="small" />;

SmallTable.story = {
  name: 'small table',
};

export const ExpandTable = () => <ExpandDemo />;

ExpandTable.story = {
  name: 'expand table',
};

export const _ResizableColumns = () => <ResizableColumns />;

_ResizableColumns.story = {
  name: 'resizable columns',
};

export const DragableTable = () => <DragableTableDemo />;

DragableTable.story = {
  name: 'dragable table',
};
DragableTable.parameters = {
  chromatic: { disableSnapshot: true },
}

export const _FixedTable = () => <FixedTable />;

_FixedTable.story = {
  name: 'fixed table',
};
_FixedTable.parameters = {
  chromatic: { disableSnapshot: true },
}

export const FixedJsxTable = () => <JSXFixedTable />;

FixedJsxTable.story = {
  name: 'fixed jsx table',
};

export const JSXTitlesDemo = () => <JSXTitles />;
JSXTitlesDemo.story = {
  name: 'jsx titles'
};

export const DynamicTable = () => (
  <div style={{ padding: 20 }}>
    <DynamicTableDemo />
  </div>
);

DynamicTable.story = {
  name: 'dynamic table',
};

export const _LinkedScroll = () => <LinkedScroll />;

_LinkedScroll.story = {
  name: 'linked scroll',
};

export const _ModalTable = () => <ModalTable />;

_ModalTable.story = {
  name: 'modal table',
};

export const _TabsTable = () => <TabsTable />;

_TabsTable.story = {
  name: 'tabs table',
};

export const _EventTable = () => <EventTable />;

_EventTable.story = {
  name: 'event table',
};

export const _FnTable = () => <FnTable />;

_FnTable.story = {
  name: 'fn table',
};

export const _DynamicFilters = () => <DynamicFilters />;

_DynamicFilters.story = {
  name: 'dynamic filters',
};

export const _ResizableTable = () => <ResizableTable />;

_ResizableTable.story = {
  name: 'resizable table',
};

export const WithPagination = () => <PaginationDemo />;

WithPagination.story = {
  name: 'with pagination',
};

export const SelectedRows = () => <SelectedRowsDemo />;

SelectedRows.story = {
  name: 'selected rows',
};

export const _ChildrenData = () => <ChildrenData />;

_ChildrenData.story = {
  name: 'children data',
};

export const ChildrenDataSelectedRows = () => <ChildrenDataSelected />;

ChildrenDataSelectedRows.story = {
  name: 'children data selected rows',
};

export const _ExpandAllRows = () => <ExpandAllRows />;

_ExpandAllRows.story = {
  name: 'expandAllRows',
};

export const _ExpandAllGroupRows = () => <ExpandAllGroupRows />;

_ExpandAllGroupRows.story = {
  name: 'expandAllGroupRows',
};

export const _ExpandRowByClick = () => <ExpandRowByClick />;

_ExpandRowByClick.story = {
  name: 'expandRowByClick',
};

export const RowSelectionBoolean = () => <Table columns={columns} dataSource={data} rowSelection />;

RowSelectionBoolean.story = {
  name: 'rowSelection boolean',
};

export const _FixAllColumnsWithoutWidth = () => <FixAllColumnsWithoutWidth />;

_FixAllColumnsWithoutWidth.story = {
  name: 'fix all columns without width',
};

export const JSXColumnPropColumnDemo = () => <JSXColumnPropColumn />;

export const FixedExpandedRowsDemo = () => <FixedExpandedRows />;
FixedExpandedRowsDemo.parameters = {
  chromatic: { disableSnapshot: true },
}

export const CustomFilterDropdownItemDemo = () => <CustomFilterDropdownItem />;

export const Virtualized = () => <VirtualizedDemo />;

export const VirtualizedNotFixedDemo = () => <VirtualizedNotFixed />;

export const InfiniteScrollDemo = () => <InfiniteScroll />;
export const VirtualTableOnCellDemo = () => <VirtualTableOnCell />;
export const ControlledSelectionDemo = () => <ControlledSelection />;
ControlledSelectionDemo.parameters = {
  chromatic: { disableSnapshot: true },
}
export const PerfComplexRenderDemo = () => <PerfComplexRender />;
PerfComplexRenderDemo.parameters = {
  chromatic: { disableSnapshot: true },
}
export const PerfContextDemo = () => <PerfContext />;
export const PerfOnRowDemo = () => <PerfOnRow />;
PerfOnRowDemo.parameters = {
  chromatic: { disableSnapshot: true },
}
export const PerfResizableSelectionDemo = () => <PerfResizableSelection />;
PerfResizableSelectionDemo.parameters = {
  chromatic: { disableSnapshot: true },
}
export const PerfVirtualizedDemo = () => <PerfVirtualized />;
export const PerfRenderDemo = () => <PerfRender />;
PerfRenderDemo.parameters = {
  chromatic: { disableSnapshot: true },
}
export const RenderPaginationDemo = () => <RenderPagination />;