React-Data-Table-Component条件控制列显示隐藏方法咨询

有几种简洁的方式实现按条件控制列的显示隐藏，以下是具体方案：

方案1：构建列数组时通过条件判断决定是否包含目标列 #

直接在定义columns数组时，用条件表达式控制目标列是否被加入数组。你可以先定义一个控制显示的变量（比如从组件state、props或其他逻辑中获取），再通过数组展开语法实现：

// 替换成你的实际判断逻辑，比如从state/props取值
const showSalaryColumn = true; 

const columns = [
    {
        name: 'Title',
        selector: row => row.title,
    },
    {
        name: 'Year',
        selector: row => row.year,
    },
    // 条件满足则添加薪资列，否则忽略
    ...(showSalaryColumn ? [{
        name: 'Salary',
        selector: row => row.salary, // 注意：你原代码这里写错了，应该取row.salary而非row.year
    }] : []),
];

方案2：给列对象配置visible属性 #

react-data-table-component的列配置原生支持visible属性，直接将该属性绑定到你的条件变量即可：

const showSalaryColumn = true; // 你的条件判断逻辑

const columns = [
    {
        name: 'Title',
        selector: row => row.title,
    },
    {
        name: 'Year',
        selector: row => row.year,
    },
    {
        name: 'Salary',
        selector: row => row.salary,
        visible: showSalaryColumn, // 用条件变量控制显示状态
    },
];

方案3：渲染时动态过滤列数组 #

如果需要支持动态切换（比如按钮控制显示/隐藏），可以在组件内部对列数组进行过滤后再传递给DataTable：

import { useState } from 'react';

function MyComponent() {
    // 用state存储列的显示状态，支持动态切换
    const [showSalary, setShowSalary] = useState(true); 

    // 过滤出需要显示的列
    const filteredColumns = columns.filter(col => {
        if (col.name === 'Salary') {
            return showSalary;
        }
        return true; // 其他列默认保持显示
    });

    return (
        <>
            <button onClick={() => setShowSalary(!showSalary)}>
                {showSalary ? '隐藏薪资列' : '显示薪资列'}
            </button>
            <DataTable
                columns={filteredColumns}
                data={data}
            />
        </>
    );
};

内容的提问来源于stack exchange，提问作者WizzyOlammie