useReColumnWidth自适应Table列宽hooks

useReColumnWidth自适应Table列宽hooks

1、前言

在使用antd中Table组件的时候，如果columns的总宽度不够容器的宽度，就会自适应，每个column的宽度会改变。

但是有的列不希望自适应，就应该展示设定的宽度。

当宽度不够撑满的时候，就让最后一列和没有设置宽度的column自适应。

2、实现

/*
 * @Author: shimmer
 * @Date: 2023-05-17 13:26:32
 * @LastEditors: shimmer
 * @LastEditTime: 2023-05-18 08:56:12
 *
 */
import {useMemo} from 'react';
import {useSize} from 'ahooks';

interface UseReColumnWidthProps {
    columns: Record<string:any>[];
    containerRef?: any;
}

const useReColumnWidth = (props: UseReColumnWidthProps) => {
    const {columns, containerRef} = props;

    // 获取容器宽度
    const containerSize = useSize(containerRef);
    const {width: tableWidth = 0} = containerSize || {};

    // 重新计算列宽
    const adaptiveColumns = useMemo(() => {
        const needAdaptiveColumnsIndex: number[] = [];
        let withoutWidthColumnCount = 0;
        columns.forEach(({width}, index) => {
            if (!width) {
                needAdaptiveColumnsIndex.push(index);
                withoutWidthColumnCount += 1;
            }
        });
        let totalWidth = columns.reduce((total, column) => total + parseFloat(String(column.width || 0)), 0);
        // columns总宽度<容器宽度
        if (!withoutWidthColumnCount && tableWidth && totalWidth < tableWidth) {
            // 最后一列需要自适应
            needAdaptiveColumnsIndex.push(columns.length - 1);
            withoutWidthColumnCount += 1;
            // 排除最后一列，重新计算
            totalWidth = columns.reduce((total, c, i) => total + (i === columns.length - 1 ? 0 : parseFloat(String(c.width!))), 0);
        }
        // columns总宽度>容器宽度不做处理

        return columns!.map((column, index) => {
            column.ellipsis = true;
            if (column.width && !needAdaptiveColumnsIndex.includes(index)) {
                return column;
            }
            return {
                ...column,
                width: Math.floor((tableWidth - totalWidth) / withoutWidthColumnCount),
            };
        });
    }, [columns, tableWidth]);

    return {
        containerRef,
        adaptiveColumns,
    };
};

export default useReColumnWidth;

3、使用

containerRef绑定到父元素上，或者绑定到Table上，Table要设置宽度。

import {Table} from "antd"
import useReColumnWidth form "./useReColumnWidth"

const demo = ({columns,datasource})=>{
    
     const {adaptiveColumns,containerRef} = useReColumnWidth({columns});
    
    return   <div ref={containerRef}>                
                  <Table columns={adaptiveColumns} datasourec = {datasource}/>
              </div>
}