物料表选择行导出

问题描述

我有一个React应用程序，该应用程序包含一个填充有数据的物料表，并且我一直在尝试允许用户选择要导出到csv的特定行。我也发布了对此[link] [1]的说明，以获取更多指导。这就是一些示例数据。

import React,{ useState,useEffect } from "react";
import "../../App.css";
import { forwardRef } from "react";
import Avatar from "react-avatar";
import Grid from "@material-ui/core/Grid";
import CsvBuilder from "csv-builder";

import MaterialTable from "material-table";
import AddBox from "@material-ui/icons/AddBox";
import ArrowDownward from "@material-ui/icons/ArrowDownward";
import Check from "@material-ui/icons/Check";
import ChevronLeft from "@material-ui/icons/ChevronLeft";
import ChevronRight from "@material-ui/icons/ChevronRight";
import Clear from "@material-ui/icons/Clear";
import DeleteOutline from "@material-ui/icons/DeleteOutline";
import Edit from "@material-ui/icons/Edit";
import FilterList from "@material-ui/icons/FilterList";
import FirstPage from "@material-ui/icons/FirstPage";
import LastPage from "@material-ui/icons/LastPage";
import Remove from "@material-ui/icons/Remove";
import SaveAlt from "@material-ui/icons/SaveAlt";
import Search from "@material-ui/icons/Search";
import ViewColumn from "@material-ui/icons/ViewColumn";
import axios from "axios";

const tableIcons = {
    Add: forwardRef((props,ref) => <AddBox {...props} ref={ref} />),Check: forwardRef((props,ref) => <Check {...props} ref={ref} />),Clear: forwardRef((props,ref) => <Clear {...props} ref={ref} />),Delete: forwardRef((props,ref) => <DeleteOutline {...props} ref={ref} />),DetailPanel: forwardRef((props,ref) => (
        <ChevronRight {...props} ref={ref} />
    )),Edit: forwardRef((props,ref) => <Edit {...props} ref={ref} />),Export: forwardRef((props,ref) => <SaveAlt {...props} ref={ref} />),Filter: forwardRef((props,ref) => <FilterList {...props} ref={ref} />),FirstPage: forwardRef((props,ref) => <FirstPage {...props} ref={ref} />),LastPage: forwardRef((props,ref) => <LastPage {...props} ref={ref} />),NextPage: forwardRef((props,ref) => <ChevronRight {...props} ref={ref} />),PrevIoUsPage: forwardRef((props,ref) => (
        <ChevronLeft {...props} ref={ref} />
    )),ResetSearch: forwardRef((props,Search: forwardRef((props,ref) => <Search {...props} ref={ref} />),SortArrow: forwardRef((props,ref) => (
        <ArrowDownward {...props} ref={ref} />
    )),ThirdStateCheck: forwardRef((props,ref) => (
        <Remove {...props} ref={ref} />
    )),ViewColumn: forwardRef((props,ref) => <ViewColumn {...props} ref={ref} />),};
//api that the data is manipulated from
const api = axios.create({
    baseURL: `https://reqres.in/api/users?page=2`,});

function displayTableSanitized() {
    var COLUMNS = [
        {
            title: "Icon",render: (rowData) => (
                <Avatar
                    maxInitials={1}
                    size={40}
                    round={true}
                    src={rowData.avatar}
                />
            ),},{ title: "First Name",field: "first_name" },{ title: "Last Name",field: "last_name" },{ title: "Email",field: "email" },];

    //table data
    const [data,setData] = useState([]);
    const [columns,setColumns] = useState(COLUMNS);

    useEffect(() => {
        api.get("")
            .then((res) => {
                setData(res.data.data);
            })
            .catch((error) => {
                console.log("Error");
                console.log(error.data.data);
            });
    },[]);

    return (
        <div className="displayTable" style={{ marginTop: "5vh" }}>
            <Grid container spacing={1}>
                <Grid item xs={1}></Grid>
                <Grid item xs={10}>
                    <MaterialTable
                        title="TestDate_Table"
                        columns={columns}
                        data={data}
                        icons={tableIcons}
                        options={{
                            selection: true,exportButton: true,emptyRowsWhenPaging: false,pageSize: 5,pageSizeOptions: [5,10,25,50,100,200],overflowX: "hidden",overflowY: "auto",}}
                        actions={[
                            {
                                position: "toolbarOnSelect",icon: SaveAlt,tooltip: "Export the selected rows!",onClick: (e,rowData) => {
                                    const fileName = "TestDate_Table";
                                    const builder = new CsvBuilder(
                                        fileName + ".csv"
                                    );
                                    builder
                                        .setColumns(
                                            columns.map(
                                                (columnDef) => columnDef.title
                                            )
                                        )
                                        .addRows(
                                            rowData.map((rowData) =>
                                                columns.map(
                                                    (columnDef) =>
                                                        rowData[columnDef.field]
                                                )
                                            )
                                        )
                                        .exportFile();
                                },]}
                    />
                </Grid>
                <Grid item xs={1}></Grid>
            </Grid>
        </div>
    );
}

export default displayTableSanitized;

我想我可能是完全错误地安装了csvbuilder软件包，而且我不确定如何解决此问题以允许用户选择要导出的特定行。尝试导出时，我不断收到builder.setColumns is not a function错误。非常感谢您提供任何帮助或指导。 [1]：https://github.com/mbrn/material-table/issues/2136

解决方法

事实证明，以上方法非常有效。我刚刚使用了错误的模块。

.no-scroll,#no-scroll{
    overflow: hidden;
}

是您真正想要的导入。