reactjs - React Material - MUIDataTable - 有没有办法在标题中计算行数？

Question

有谁知道在标题中包含行数的方法？我似乎无法使用options或columns属性来做到这一点。

我想要实现的是：

第 1 列标题（行数）| 第 2 列标题 | ...... | N 列标题

提前感谢您的任何建议。

更多信息：

1. 我想在图片中实现的目标

2. 试图在 SandBox 中获取我的应用程序的工作副本并将回发。当前沙箱显示使用的选项和列选项

标签： reactjsmui-datatable

Answer 1

请检查这个例子：

import React from "react";
import MUIDataTable from "mui-datatables";

export default class MuiDatatableHeader extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            filteredRowCount: 0
        }
    }

    render() {
        const columns = [
            {
                label: "Name",
                name: "Name",
                options: {
                    customHeadRender: (columnMeta, updateDirection) => (
                        `${columnMeta.name} (Total Count ${data.length})`
                    )
                }
            },
            {
                label: "Title", name: "Title",
                options: {
                    customHeadRender: (columnMeta, updateDirection) => (
                        `${columnMeta.name} (Total Filter Row Count ${this.state.filteredRowCount})`
                    )
                }
            },
            {name: "Location"},
            {name: "Age"},
            {name: "Salary"}
        ];
        const data = [
            ["Gabby George", "Business Analyst", "Minneapolis", 30, "$100,000"],
            ["Aiden Lloyd", "Business Consultant", "Dallas", 55, "$200,000"]
        ];

        const options = {
            selectableRows: "multiple",
            selectableRowsHeader: data.length > 0,
        };

        return (
            <div>
                <button onClick={() => {
                    this.setState({filteredRowCount: 10})
                }}>Filter data
                </button>
                <MUIDataTable
                    title={"ACME Employee list"}
                    data={data}
                    columns={columns}
                    options={options}
                />
            </div>
        );
    }
}