Reactjs 在Mui数据表中上载CSV文件

如何在Mui数据表中上载CSV文件并在表中显示？

---

我是Mui Datatable的新手

到目前为止，Mui Datatable中还没有现有的功能，但这将是一个很好的功能要求

解决方法是定义您自己的函数，该函数解析CSV文件，该文件返回一个标题数组和一个行记录对象数组。结果可以通过道具传递

---

其中

myData

和

myColumns

具有CSV文件的记录和标题。

到目前为止，MUI数据表中还没有现有功能，但这将是一个很好的功能要求

解决方法是定义您自己的函数，该函数解析CSV文件，该文件返回一个标题数组和一个行记录对象数组。结果可以通过道具传递

---

其中

myData

和

myColumns

具有CSV文件的记录和标题。

将CSV文件上载到的方法是使用npm包

我已经建立了一个模型，作为如何建立它的一个例子

MockData.csv CSVUploader.jsx 这基本上是从React Paparse文档中提取的，但配置为{{headers:true}：

从“React”导入React；
从“解析”导入{CSVReader}；
const buttonRef=React.createRef（）；
const CSVReader1=（道具）=>{
常量{setCSVData}=props；
const handleOpenDialog=（e）=>{
//请注意，ref被设置为异步，因此在某个点上可能为null
if（按钮ref.current）{
按钮ref.current.open（e）；
}
};
const handleOnFileLoad=（数据）=>{
console.log（“-------------------------------”；
控制台日志（数据）；
/****当headers配置选项设置为“true”时，它
返回一个空对象作为数组中的最后一项，
所以我们需要删除它：***/
data.pop（）；
setCSVData（数据）；
console.log（“-------------------------------”；
};
常量handleOnError=（错误、文件、输入项、原因）=>{
console.log（“-------------------------------”；
控制台日志（err）；
console.log（“-------------------------------”；
};
常量handleOnRemoveFile=（数据）=>{
console.log（“-------------------------------”；
控制台日志（数据）；
console.log（“-------------------------------”；
};
常量handleRemoveFile=（e）=>{
//请注意，ref被设置为异步，因此在某个点上可能为null
if（按钮ref.current）{
按钮ref.current.removeFile（e）；
}
};
返回(
基本上传
{（{file}）=>(
浏览文件
{file&&file.name}
去除
)}
);
};
导出默认CSVReader1；

CustomToolbar.jsx 这里，我们有一个customToolbar组件，它基本上与默认工具栏相同，但我们将添加一个额外的按钮来上载CSV文件：

import React，{useffect，useState}来自“React”；
从“@material ui/core/IconButton”导入图标按钮；
从“@material ui/core/Tooltip”导入工具提示；
从“@material ui/icons/AddCircleOutline”导入AddCircleOutlineIcon；
从“@material ui/core/styles”导入{makeStyles}”；
从“@物料界面/核心/模态”导入模态；
从“@物料界面/核心/按钮”导入按钮；
从“/CSVUploader.jsx”导入CSVUploader；
const useStyles=makeStyles（（主题）=>({
论文：{
边距：“0自动”，
顶部：“25vh”，
职位：“相对”，
宽度：400，
背景色：theme.palete.background.paper，
边框：“2倍固体#000”，
boxShadow:theme.shadows[5]，
填充：主题。间距（2，4，3）
}
}));
const CustomToolbar=（道具）=>{
const{setDataForTable}=props；
const classes=useStyles（）；
const[open，setOpen]=useState（false）；
const[CSVData，setCSVData]=useState（[]）；
//更新CSVData时，解析它并将其传递给表：
useffect（（）=>{
const dataArr=Array.from（CSVData）.map（（数据）=>{
//返回前确保值为真值：
if（data.data.name&&data.data.city）{
返回{
名称：data.data.name，
公司：data.data.company，
城市：data.data.city，
状态：data.data.state
};
}
});
setDataForTable（dataArr）；
}，[CSVData，setDataForTable]）；
//开闭模式
const handleOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
/*自定义按钮打开上传模式*/
返回(
上传CSV数据
闭合模态
);
};
导出默认自定义工具栏；

表1.jsx 在这里，我们将customToolbar组件传递给表选项：

import React, { useState } from "react";
import MUIDataTable from "mui-datatables";
import CustomToolbar from "./CustomToolbar.jsx";

const columns = [
  {
    name: "name",
    label: "Name",
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: "company",
    label: "Company",
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: "city",
    label: "City",
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: "state",
    label: "State",
    options: {
      filter: true,
      sort: true
    }
  }
];

const Table = () => {
  // Parse csv data from CustomToolbar:
  const [dataForTable, setDataForTable] = useState();

  // Custom Table options with custom toolbar:
  const options = {
    filterType: "checkbox",
    customToolbar: () => {
      return <CustomToolbar setDataForTable={setDataForTable} />;
    }
  };

  // Table
  return (
    <MUIDataTable
      title={"Employee List"}
      data={dataForTable}
      columns={columns}
      options={options}
    />
  );
};

export default Table;

import React，{useState}来自“React”；
从“mui数据表”导入MUIDataTable；
从“/CustomToolbar.jsx”导入CustomToolbar；
常量列=[
{
姓名：“姓名”，
标签：“姓名”，
选项：{
过滤器：对，
排序：正确
}
},
{
名称：“公司”，
标签：“公司”，
选项：{
过滤器：对，
排序：正确
}
},
{
名称：“城市”，
标签：“城市”，
选项：{
过滤器：对，
排序：正确
}
},
{
名称：“国家”，
标签：“国家”，
选项：{
过滤器：对，
排序：正确
}
}
];
常数表=（）=>{
//从CustomToolbar解析csv数据：
const[dataForTable，setDataForTable]=useState（）；
//带有自定义工具栏的自定义表格选项：
常量选项={
filterType:“复选框”，
自定义工具栏：（）=>{
返回；
}
};
//桌子
返回(
);
};
导出默认表；

将CSV文件上载到的方法是使用npm包

我已经建立了一个模型，作为如何建立它的一个例子

MockData.csv CSVUploader.jsx 这基本上是从反应器中提取出来的

import React, { useState } from "react";
import MUIDataTable from "mui-datatables";
import CustomToolbar from "./CustomToolbar.jsx";

const columns = [
  {
    name: "name",
    label: "Name",
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: "company",
    label: "Company",
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: "city",
    label: "City",
    options: {
      filter: true,
      sort: true
    }
  },
  {
    name: "state",
    label: "State",
    options: {
      filter: true,
      sort: true
    }
  }
];

const Table = () => {
  // Parse csv data from CustomToolbar:
  const [dataForTable, setDataForTable] = useState();

  // Custom Table options with custom toolbar:
  const options = {
    filterType: "checkbox",
    customToolbar: () => {
      return <CustomToolbar setDataForTable={setDataForTable} />;
    }
  };

  // Table
  return (
    <MUIDataTable
      title={"Employee List"}
      data={dataForTable}
      columns={columns}
      options={options}
    />
  );
};

export default Table;