feat: add pivot table functionality to DataTable

[vinitkhandal717]

Summary

add pivot table functionality

Issue Ticket

Closes #1330

USES

function App() {
const [isOpen, setIsOpen] = useState(false)
const data = [
{ region: 'North', product: 'Widget', sales: 1000 },
{ region: 'South', product: 'Gadget', sales: 1500 },
]
const columns = [
{ field: 'region', header: 'Region', type: 'text' },
{ field: 'product', header: 'Product', type: 'text' },
{ field: 'sales', header: 'Sales', type: 'number' },
]
return (
<>
<Button
text="Open Pivot Table"
onClick={() => setIsOpen(true)}
/>

  <PivotTableModal
    isOpen={isOpen}
    onClose={() => setIsOpen(false)}
    data={data}
    columns={columns}
    onConfigChange={(config) => console.log(config)}
  />
</>

)
}
Props
Prop Type
isOpen boolean
onClose () => void
data array
columns array
title string
trigger ReactNode
onTriggerClick () => void
onConfigChange (config) => void
onExport (config) => void
How to Use

1. Select Column - Pick a field from dropdown
2. Add to Section - Click + button for Rows/Columns/Values
3. Configure - Change aggregation, toggle totals
4. Export - Click Download button
   Config Output
   {
   rows: ['region'],
   columns: ['product'],
   values: [{ field: 'sales', aggregation: 'sum' }]
   }

[pkg-pr-new]

Open in StackBlitz

npm i https://pkg.pr.new/@juspay/blend-design-system@1349

commit: d0573bc