react中columns表格和查询

在React中，如果你需要创建一个包含列（columns）的数据表格并且支持动态查询，你可以使用像`react-table`这样的库。它提供了一个强大的、灵活的方式来构建表格，并且内置了查询功能。

首先，你需要安装`react-table`库，可以使用npm或yarn：

npm install react-table
# 或者
yarn add react-table

然后，在组件中导入并使用它：

import { useTable, useSortBy } from 'react-table';

// 假设你有一个数据源dataArray和列配置columnsArray
const columns = [
  // 根据需要配置列，包括标题、排序和过滤等
  {
    Header: '姓名',
    accessor: 'name', // 访问数据字段
    sortType: 'string', // 设置排序规则
  },
  // ...其他列
];

function DataTable({ dataArray }) {
  const table = useTable({
    data: dataArray,
    columns,
    initialState: { pageIndex: 0 }, // 初始化状态
    // 如果需要，可以添加useSortBy来处理排序
    // 执行如下的设置
    useSortBy,
  });

  // 返回渲染表格所需的元素
  return (
    <table {...table.tableProps}>
      <thead>
        {table.headerGroups.map(headerGroup => (
          <tr {...headerGroup.getHeaderGroupProps()}>
            {headerGroup.headers.map(column => (
              <th {...column.getHeaderProps()}>{column.render('Header')}</th>
            ))}
          </tr>
        ))}
      </thead>
      <tbody {...table.tbodyProps}>
        {table.rows.map(row => (
          <tr {...row.getRowProps()}>
            {row.cells.map(cell => (
              <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

// 调用DataTable组件并传入数据和查询参数
<DataTable dataArray={yourData} query={{ name: '搜索关键词' }} />

在这个例子中，用户可以在输入框中输入关键字，通过`query`属性传递给组件，然后`react-table`会根据这个查询条件过滤显示的数据。