primevue icon indicating copy to clipboard operation
primevue copied to clipboard

DataTable Export ColumnGroup

Open aliibrahimroshan opened this issue 2 years ago • 0 comments

Hello,

When i try to export data table having group columns is not exporting the headers of group column . i want to exprot exact same data table to csv format. Here is my data table looks like. Screenshot from 2022-03-24 16-16-07

Here is the code i am using to export

<DataTable :value="sales" responsiveLayout="scroll" ref="dt">
       <ColumnGroup type="header">
           <Row>
               <Column header="Sale Rate" :colspan="5" />
           </Row>
           <Row>
               <Column header="Sales" :colspan="3" />
               <Column header="Profits" :colspan="2" />
           </Row>
           <Row>
               <Column header="Product" :sortable="true" field="lastYearSale"/>
               <Column header="Last Year" :sortable="true" field="lastYearSale"/>
               <Column header="This Year" :sortable="true" field="thisYearSale"/>
               <Column header="Last Year" :sortable="true" field="lastYearProfit"/>
               <Column header="This Year" :sortable="true" field="thisYearProfit"/>
           </Row>
       </ColumnGroup>
       <Column field="product" />
       <Column field="lastYearSale">
           <template #body="slotProps">
               {{slotProps.data.lastYearSale}}%
           </template>
       </Column>
       <Column field="thisYearSale">
           <template #body="slotProps">
               {{slotProps.data.thisYearSale}}%
           </template>
       </Column>
       <Column field="lastYearProfit">
           <template #body="slotProps">
               {{slotProps.data.lastYearProfit}}
           </template>
       </Column>
       <Column field="thisYearProfit">
           <template #body="slotProps">
               {{slotProps.data.thisYearProfit}}
           </template>
       </Column>
   </DataTable>


private sales = [
           {product: 'Bamboo Watch', lastYearSale: 51, thisYearSale: 40, lastYearProfit: 54406, thisYearProfit: 43342},
           {product: 'Black Watch', lastYearSale: 83, thisYearSale: 9, lastYearProfit: 423132, thisYearProfit: 312122},
           {product: 'Blue Band', lastYearSale: 38, thisYearSale: 5, lastYearProfit: 12321, thisYearProfit: 8500},
           {product: 'Blue T-Shirt', lastYearSale: 49, thisYearSale: 22, lastYearProfit: 745232, thisYearProfit: 65323},
           {product: 'Brown Purse', lastYearSale: 17, thisYearSale: 79, lastYearProfit: 643242, thisYearProfit: 500332},
           {product: 'Chakra Bracelet', lastYearSale: 52, thisYearSale:  65, lastYearProfit: 421132, thisYearProfit: 150005},
           {product: 'Galaxy Earrings', lastYearSale: 82, thisYearSale: 12, lastYearProfit: 131211, thisYearProfit: 100214},
           {product: 'Game Controller', lastYearSale: 44, thisYearSale: 45, lastYearProfit: 66442, thisYearProfit: 53322},
           {product: 'Gaming Set', lastYearSale: 90, thisYearSale: 56, lastYearProfit: 765442, thisYearProfit: 296232},
           {product: 'Gold Phone Case', lastYearSale: 75, thisYearSale: 54, lastYearProfit: 21212, thisYearProfit: 12533}
       ];

When i do export this is what i am getting

Screenshot from 2022-03-24 16-18-28

As you can see that group col are missing is export csv file

aliibrahimroshan avatar Mar 24 '22 11:03 aliibrahimroshan