Table export with column groups

UI Components for React
Post Reply
KonradBartlett
Posts: 1
Joined: 20 Mar 2020, 13:27

20 Mar 2020, 13:30

I have a datatable with column groups and I want to be able to export the data into a csv with the column groups in tact. However when I export the table using table.exportCSV() is only results in a table with the field values as the headers.

Is there a way to override the default export function so that I can put in my own custom headers?

Code: Select all

import React, { useState } from "react";
import MaterialTable from "material-table";
import { Dropdown } from "primereact/dropdown";
import { Growl } from "primereact/growl";
import { useTranslation } from "react-i18next";
import { DataTable } from "primereact/datatable";
import { Column } from "primereact/column";
import { ColumnGroup } from "primereact/columngroup";
import { Row } from "primereact/row";
import { Button } from "primereact/button";

export function Report() {
  var [growl] = useState();

  const { t, i18n } = useTranslation();

  let headerGroup = (
    <ColumnGroup>
      <Row>
        <Column header="Brand" rowSpan={3} />
        <Column header="Sale Rate" colSpan={4} />
      </Row>
      <Row>
        <Column header="Sales" colSpan={2} />
        <Column header="Profits" colSpan={2} />
      </Row>
      <Row>
        <Column header="Last Year" />
        <Column header="This Year" />
        <Column header="Last Year" />
        <Column header="This Year" />
      </Row>
    </ColumnGroup>
  );

  var dt = null;

  return (
    <div>
      <Growl ref={el => (growl = el)} />
      <DataTable
        value={[]}
        headerColumnGroup={headerGroup}
        header={
          <div style={{ textAlign: "left" }}>
            <Button
              type="button"
              icon="pi pi-external-link"
              iconPos="left"
              label="CSV"
              onClick={e => {
                console.log(dt);
                dt.exportCSV();
              }}
            ></Button>
          </div>
        }
        ref={el => {
          // console.log(el);
          dt = el;
        }}
      >
        <Column field="brand" />
        <Column field="lastYearSale" />
        <Column field="thisYearSale" />
        <Column field="lastYearProfit" />
        <Column field="thisYearProfit" />
      </DataTable>
    </div>
  );
}

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest