Ant Design 实现 Table 的固定行 (一般用于显示合计数据)

[eternallycyf]

1. 通过后端接口返回 然后利用Table.Summary 实现
2. 利用CSS position: "sticky" 实现

[eternallycyf]

利用CSS position: "sticky" 实现

• 需要自己调整合计行的行高
• 需要后端返回所有数据 (或者在分页情况下 永远返回合计行的数据 不论顺序)

const CommonTable = (props) => {
  const { columns = [], dataSource = [], fixedRowKeys = [], fixRowHeight = 45, rowKey = '', ...restProps } = props;

  const getFixedData = (dataSource) => {
    let newDataSource = [];
    let fixRowData = fixRowKeys?.map((item) => dataSource.find((ele) => ele?.rowKey == item)).filter(Boolean) || [];
    if (!fixRowData.length) return dataSource;
    newDataSource = dataSource.filter((item) => !fixRowKeys?.includes(item.rowKey));
    newDataSource = [...fixRowData, ...newDataSource];
    return newDataSource;
  };
  const data = !fixRowKeys?.length ? dataSource : getFixedData(dataSource);

  const onRow = (record, index) => {
    const defaultRowProps = defaultOnRow ? defaultOnRow(record, index) : {};
    const dataHasFixedKeys = fixRowKeys.filter((key) => dataSource.some((ele) => ele?.[rowKey] == key)) || [];
    const currentRowKey = record?.[rowKey];
    const fixedStyle = {};

    if (dataHasFixedKeys.includes(currentRowKey)) {
      fixedStyle['position'] = 'sticky';
      fixedStyle['top'] = fixRowHeight * dataHasFixedKeys.findIndex((item) => item == currentRowKey);
      fixedStyle['zIndex'] = 999;
    }

    return {
      index,
      style: fixedStyle,
      ...defaultRowProps,
    };
  };

  return <Table columns={columns} dataSource={data} rowKey={rowKey} onRow={onRow} {...restProps} />;
};

export default CommonTable;

[eternallycyf]

通过后端接口返回所有需要固定行的数据 然后利用Table.Summary 实现

import _ from 'lodash';
import { Table } from 'antd';

const columns = [
 {
   useSummary: (content, data) => '合计'
 }
]

const CommonTable = (props) => {
  const {
    columns = [],
    dataSource = [],
    fixRowDataSource = [],
    expandable,

    // 自定义的props
    // string[] 需要排除的列 固定行的某列直接显示 '--'
    removeSummary = [],
    // 'top' | 'bottom' 固定行位置 在顶部还是底部
    summaryPosition = 'top',
    ...restProps
  } = props;

  const renderSummary = () => {
    const newColumns = formatColumn(_.flattenDeep(columns));
    let defaultIndex = 0;
    if (expandable?.expandedRowRender ) {
      newColumns.unshift({});
      defaultIndex++;
    }
    if (expandable?.onExpand) {
      newColumns.unshift({});
      defaultIndex++;
    }

    const renderCell = (item, index, currentItemData) => {
      const textAlign = item.align ? item.align : 'center';

      const _renderSummaryCell = (index, content, align = 'left') => {
        return (
          <Table.Summary.Cell key={index} index={index}>
            <div style={{ textAlign: align }}>{content}</div>
          </Table.Summary.Cell>
        );
      };

      if (index == defaultIndex) {
        const content = item.useSummary ? item.useSummary('合计', currentItemData) : '合计';
        return _renderSummaryCell(defaultIndex, content, 'center');
      }

      if (removeSummary && removeSummary?.length != 0 && removeSummary?.includes(item?.dataIndex)) {
        return _renderSummaryCell(index, '--', textAlign);
      }

      const text = currentItemData?.[item?.dataIndex!];
      let content = text != '合计' ? (item.render ? item?.render(text, currentItemData, index) : text) : '';
      if (item.useSummary) content = item.useSummary(content, currentItemData);

      return _renderSummaryCell(index, content ?? '--', textAlign);
    };

    return (
      <Table.Summary fixed={summaryPosition}>
        {(fixRowDataSource || []).map((ele, index) => (
          <Table.Summary.Row>{newColumns.map((item, index) => renderCell(item, index, ele))}</Table.Summary.Row>
        ))}
      </Table.Summary>
    );
  };

  return <Table columns={columns} dataSource={dataSource} expandable={expandable} {...restProps} />;
};

export default CommonTable;