@akulaku/sticky-table

基于 ant-design Table组件封装的吸顶表格组件

Props

• top 吸顶位置，默认值 0
• 其他属性与ant-design 的 Table 完全一致

Demo

// demo.less
.content {
  background: #ddd;
  height: 2000px;
  text-align: center;
  font-size: 20px;
}

// demo.jsx
import React from 'react';
import StickyTable from '@akulaku/sticky-table';
import styles from 'demo.less';

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: '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}`,
  });
}


export default function Demo() {
  return (
    <div>
      <div className={styles.content}>Long Content 1</div>
      <StickyTable columns={columns} dataSource={data} scroll={{ x: 1500, y: 300 }} />
      <div className={styles.content}>Long Content 2</div>
    </div>
  );
}