ant-design/components/table/demo/sticky.md
骗你是小猫咪 bd02b83da4
feat: Table new sticky prop (#25939)
* feat: Table new sticky prop

* add example

* update snapshots

* fix typo

* fix example and improve less

* rename to @zindex-table-fixed-column

* fix compile error

* fix header z-index

* upgrade rc-table and add active style

* improve less var

* upgrade rc-table and remove hover style

Co-authored-by: 二货机器人 <smith3816@gmail.com>
2020-08-07 17:53:23 +08:00

1.7 KiB
Raw Blame History

order title
99
en-US zh-CN
Fixed header and scroll bar with the page 随页面滚动的固定表头和滚动条

zh-CN

对于长表格,需要滚动才能查看表头和滚动条,那么现在可以设置跟随页面固定表头和滚动条。

en-US

For long tableneed to scroll to view the header and scroll barthen you can now set the fixed header and scroll bar to follow the page.

import { Table } from 'antd';

const columns = [
  {
    title: 'Full Name',
    width: 100,
    dataIndex: 'name',
    key: 'name',
    fixed: 'left',
  },
  {
    title: 'Age',
    width: 100,
    dataIndex: 'age',
    key: 'age',
    fixed: 'left',
  },
  {
    title: 'Column 1',
    dataIndex: 'address',
    key: '1',
    width: 150,
  },
  {
    title: 'Column 2',
    dataIndex: 'address',
    key: '2',
    width: 150,
  },
  {
    title: 'Column 3',
    dataIndex: 'address',
    key: '3',
    width: 150,
  },
  {
    title: 'Column 4',
    dataIndex: 'address',
    key: '4',
    width: 150,
  },
  {
    title: 'Column 5',
    dataIndex: 'address',
    key: '5',
    width: 150,
  },
  {
    title: 'Column 6',
    dataIndex: 'address',
    key: '6',
    width: 150,
  },
  {
    title: 'Column 7',
    dataIndex: 'address',
    key: '7',
    width: 150,
  },
  { title: 'Column 8', dataIndex: 'address', key: '8' },
  {
    title: 'Action',
    key: 'operation',
    fixed: 'right',
    width: 100,
    render: () => <a>action</a>,
  },
];

const data = [];
for (let i = 0; i < 100; i++) {
  data.push({
    key: i,
    name: `Edrward ${i}`,
    age: 32,
    address: `London Park no. ${i}`,
  });
}

ReactDOM.render(
  <Table columns={columns} dataSource={data} scroll={{ x: 1500 }} sticky />,
  mountNode,
);