React Tabulator如何仅下载选中行至XLSX文件？

问题分析 #

你之前的方案无效，核心原因是：

1. 手动通过rowSelected/rowDeselected给行数据添加selected字段，并未真正同步到表格数据源中，导致setFilter无法匹配到有效行，表格空白且导出无数据。
2. 过滤后未清除过滤器，会持续影响表格显示状态。

以下是经过验证的可行方案：

1. 简化列配置，移除手动维护selected字段的代码 #

Tabulator内置了行选择的管理机制，无需手动给数据添加selected属性，直接保留基础的行选择配置即可：

const columnsSickWagon = [
    {
      formatter: "rowSelection",
      titleFormatter: "rowSelection",
      hozAlign: "center",
      headerSort: false,
      selectable: true
      // 移除rowSelected和rowDeselected函数
    },
    {
      title: "Train No",
      field: "trainNo",
      align: "center",
      headerFilter: "input",
      headerFilterPlaceholder: "search...",
    },
    // 其他列配置保持不变
    .....
];

2. 修改下载函数，直接导出选中行数据 #

使用Tabulator官方提供的getSelectedData()API获取选中行，直接传入下载方法，无需修改表格过滤状态：

var sickWagonListmapref = null;
const downloadSickWagonData = () => {
    const table = sickWagonListmapref.table;
    // 获取所有选中的行数据
    const selectedRows = table.getSelectedData();
    
    if (selectedRows.length === 0) {
        alert("请先选择要导出的行");
        return;
    }
    
    const date = new Date();
    // 优化文件名格式，避免特殊字符
    const fileName = `Sick Wagon Data ${date.toLocaleString().replace(/[/:,]/g, "-")}.xlsx`;
    
    // 直接传入选中数据进行导出
    table.download("xlsx", fileName, {
        sheetName: "Sheet1",
        data: selectedRows
    });
};

3. React渲染部分无需修改 #

你的ReactTabulator组件配置完全正常，继续使用即可：

<ReactTabulator
    ref={(ref) => {
        sickWagonListmapref = ref;
    }}
    data={datasourceSickWagonData}
    columns={columnsSickWagon}
    options={{
        layout: "fitDataFill",
        height: 400,
        downloadDataFormatter: (data) => data,
        downloadReady: (fileContents, blob) => blob,
    }}
/>

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