如何在react-bootstrap-table-next中的页脚中添加更多行?

时间:2020-07-02 11:02:23

标签: react-bootstrap-table

我在React项目中使用react-bootstrap-table-next

我在表的页脚中需要2行,但是在官方文档中找不到任何关于此的内容。第一行应该显示总数,第二行是百分比。

这是我的代码:


  const columns = [
    {
      text: "S.no.",
      dataField: "id",
      sort: true,
      classes: "font-weight-bold",
      headerAttrs: { width: "100px" }
    },
    {
      text: "Service",
      dataField: "category",
      sort: true,
      formatter: formatService
    },
    {
      text: "Category",
      dataField: "service",
      sort: true,
      footer: "Total",
      footerAlign: "right",
      footerAttrs: { colSpan: 3 }
    },
    {
      text: "Ok",
      dataField: "ok",
      sort: true,
      classes: "text-success",
      footer: reportDetails ? `${reportDetails.totalOk}` : "",
      footerClasses: "text-success"
    },
    {
      text: "Unknown",
      dataField: "unknown",
      sort: true,
      classes: "text-muted",
      footer: reportDetails ? `${reportDetails.totalUnknown}` : "",
      footerClasses: "text-muted"
    },
    {
      text: "Warn",
      dataField: "warn",
      sort: true,
      classes: "text-warning",
      footer: reportDetails ? `${reportDetails.totalWarn}` : "",
      footerClasses: "text-warning"
    },
    {
      text: "Fail",
      dataField: "fail",
      sort: true,
      classes: "text-danger",
      footer: reportDetails ? `${reportDetails.totalFail}` : "",
      footerClasses: "text-danger"
    }
  ];

 return (
    <BootstrapTable
        bootstrap4
        keyField="id"
        data={report}
        columns={columns}
        bordered={false}
        condensed
      />
 )

这给了我: current result

但是我需要这样2行: requirement

如何添加第二个页脚行?

0 个答案:

没有答案