如何在 MDB 数据表 React js 中添加下载功能答案

【问题标题】：How to add download feature in MDB datatable React js如何在 MDB 数据表 React js 中添加下载功能
【发布时间】：2020-08-14 15:19:01
【问题描述】：

我在 ReactJs 中使用 MDB 数据表。

这是我的 ReactComponent.js

 render(){
        let reports = this.props.reports.data;
        console.log("reports",reports)

        const data = {
                    columns: [
                      {
                        label: 'ID',
                        field: 'id',
                        sort: 'asc',
                        fixedColumns: true,
                        width: 50
                      },
                      {
                        label: 'Item Title',
                        field: 'title',
                        sort: 'asc',
                        fixedColumns: true,
                        width: 200
                      }
                    ],
                    rows: reports
                  };


        return(
            <Container>
                <MDBDataTable
                      striped
                      bordered
                      hover
                      scrollX
                      data={data}
                    />
            </Container>

        )
    }

image 1

image2

表格正在显示，一切正常。

想要删除标签“搜索”和“显示 49 个条目中的 1 到 10 个”。
想加个下载按钮来下载excel中的所有数据

我怎样才能实现这些？

【问题讨论】：

标签： reactjs datatables mdbootstrap

【解决方案1】：

删除标签“搜索”

如果您使用最新版本/付费版本，“搜索”文本将默认消失。

例如：mdbootstrap exaple

另一种方法是使用 CSS，但您需要修复响应式问题：

#dtBasicExample_filter label {
  position: relative;
} 

#dtBasicExample_filter input {
  position: absolute;
  left: 0;
  top: 0;
  margin: 0;
}

删除文本“显示 49 个条目中的 1 到 10 个”

CSS 解决方案：

.dataTables_info {
    display: none;
}

由于mdbootstrap目前不支持导出excel文件，可以考虑使用其他库或者导入其他导出excel文件工具，如datatables和KendoReact

我个人在我的项目中使用 KendoReact，以下代码基于您的使用 KendoReact 编写代码：

_export; 

export = () => { 
    this._export.save();
}

render(){
    let reports = this.props.reports.data;
    console.log("reports",reports)

const data = {
            columns: [
              {
                label: 'ID',
                field: 'id',
                sort: 'asc',
                fixedColumns: true,
                width: 50
              },
              {
                label: 'Item Title',
                field: 'title',
                sort: 'asc',
                fixedColumns: true,
                width: 200
              }
            ],
            rows: reports
          };


return(
    <Container>
        <MDBDataTable
              striped
              bordered
              hover
              scrollX
              data={data}
            />
    </Container>

    <ExcelExport 
    data={reports} 
    ref={exporter => this._export = exporter} 
    > 
        <button 
            title="Export Excel" 
            className="k-button k-primary" 
            onClick={this.export} 
        > 
        Export to Excel 
        </button> 
        <Grid style={{ display: 'none' }}> 
           <GridColumn field="id" title="ID" /> 
           <GridColumn field="title" title="Item Title" /> 
        </Grid> 
    </ExcelExport> 
    )
}

在将它实现到您的代码之前，您可以先尝试 KendoReact here。

【讨论】：