@juspay/blend-design-system 0.0.37-beta.3 → 0.0.37-beta.5

package/lib/components/DataTable/DataTable.tsx

@@ -1,4 +1,4 @@
-import {
+import React, {
     useState,
     useEffect,
     useMemo,
@@ -61,6 +61,8 @@ import { MenuGroupType, MenuAlignment } from '../Menu/types'
 
 import { useMobileDataTable } from './hooks/useMobileDataTable'
 import MobileColumnDrawer from './MobileColumnDrawer'
+import PivotTableModal from './PivotTableModal'
+import type { PivotTableConfig } from './PivotTableModal/types'
 import { useResponsiveTokens } from '../../hooks/useResponsiveTokens'
 import styled from 'styled-components'
 import { FOUNDATION_THEME } from '../../tokens'
@@ -115,6 +117,7 @@ const DataTable = forwardRef(
             showSettings = false,
             showFooter = true,
             enableInlineEdit = false,
+            showActionsColumn = true,
             enableRowExpansion = false,
             enableRowSelection = false,
             rowSelectionConfig,
@@ -153,6 +156,8 @@ const DataTable = forwardRef(
             getRowStyle,
             tableBodyHeight,
             mobileColumnsToShow,
+            enablePivotTable = false,
+            pivotTableConfig,
             ...rest
         }: DataTableProps<T>,
         ref: React.Ref<HTMLDivElement>
@@ -314,6 +319,7 @@ const DataTable = forwardRef(
         >({})
 
         const [isFormatEnabled, setIsFormatEnabled] = useState<boolean>(true)
+        const [isPivotModalOpen, setIsPivotModalOpen] = useState<boolean>(false)
 
         const [mobileDrawerOpen, setMobileDrawerOpen] = useState<boolean>(false)
         const [selectedRowForDrawer, setSelectedRowForDrawer] =
@@ -651,6 +657,37 @@ const DataTable = forwardRef(
             pagination?.pageSize,
         ])
 
+        // Stable row ID list for the current page. Used for selection state and
+        // as a cheap signal to remount the tbody when results change (e.g. server-side search).
+        const currentPageRowIds = useMemo(() => {
+            return currentData.map((row) => String(row[idField]))
+        }, [currentData, idField])
+
+        // Monotonically increasing "dataVersion" for the current page's row IDs.
+        // This avoids expensive per-character hashing in TableBody while still
+        // forcing a remount when IDs change but length/first/last stay the same.
+        const [tbodyDataVersion, setTbodyDataVersion] = useState(0)
+        const prevPageRowIdsRef = useRef<string[] | null>(null)
+        useEffect(() => {
+            const prev = prevPageRowIdsRef.current
+            let changed =
+                prev == null || prev.length !== currentPageRowIds.length
+
+            if (!changed && prev) {
+                for (let i = 0; i < prev.length; i++) {
+                    if (prev[i] !== currentPageRowIds[i]) {
+                        changed = true
+                        break
+                    }
+                }
+            }
+
+            if (changed) {
+                setTbodyDataVersion((v) => v + 1)
+            }
+            prevPageRowIdsRef.current = currentPageRowIds
+        }, [currentPageRowIds])
+
         const updateSelectAllState = (
             selectedRowsState: Record<string, boolean>
         ) => {
@@ -906,6 +943,14 @@ const DataTable = forwardRef(
 
         const sortTimeoutRef = useRef<NodeJS.Timeout | null>(null)
 
+        useEffect(() => {
+            return () => {
+                if (sortTimeoutRef.current) {
+                    clearTimeout(sortTimeoutRef.current)
+                }
+            }
+        }, [])
+
         const applySortConfig = (
             field: keyof T,
             newSortConfig: SortConfig | null
@@ -1241,7 +1286,8 @@ const DataTable = forwardRef(
             effectiveVisibleColumns.length +
             (enableRowSelection ? 1 : 0) +
             (enableRowExpansion ? 1 : 0) +
-            ((enableInlineEdit || rowActions) &&
+            (showActionsColumn &&
+            (enableInlineEdit || rowActions) &&
             !(mobileConfig.isMobile && mobileConfig.enableColumnOverflow)
                 ? 1
                 : 0) +
@@ -1394,6 +1440,53 @@ const DataTable = forwardRef(
             [ref]
         )
 
+        const pivotTriggerSlot = pivotTableConfig?.triggerSlot || 2
+
+        const pivotTriggerButton = useMemo(() => {
+            if (!enablePivotTable || !pivotTableConfig?.triggerButton) {
+                return null
+            }
+
+            const triggerNode = pivotTableConfig.triggerButton
+            if (!React.isValidElement(triggerNode)) {
+                return triggerNode
+            }
+
+            const existingOnClick = (
+                triggerNode.props as { onClick?: (event: unknown) => void }
+            ).onClick
+
+            return React.cloneElement(
+                triggerNode as React.ReactElement<{
+                    onClick?: (event: unknown) => void
+                }>,
+                {
+                    onClick: (event: unknown) => {
+                        existingOnClick?.(event)
+                        setIsPivotModalOpen(true)
+                    },
+                }
+            )
+        }, [enablePivotTable, pivotTableConfig?.triggerButton])
+
+        const effectiveHeaderSlot1 =
+            pivotTriggerSlot === 1 && pivotTriggerButton
+                ? pivotTriggerButton
+                : headerSlot1
+        const effectiveHeaderSlot2 =
+            pivotTriggerSlot === 2 && pivotTriggerButton
+                ? pivotTriggerButton
+                : headerSlot2
+        const effectiveHeaderSlot3 =
+            pivotTriggerSlot === 3 ? (
+                <>
+                    {headerSlot2}
+                    {pivotTriggerButton}
+                </>
+            ) : (
+                effectiveHeaderSlot2
+            )
+
         return (
             <Block
                 ref={containerRefCallback}
@@ -1474,8 +1567,8 @@ const DataTable = forwardRef(
                             </>
                         ) : null
                     }
-                    headerSlot2={headerSlot1}
-                    headerSlot3={headerSlot2}
+                    headerSlot2={effectiveHeaderSlot1}
+                    headerSlot3={effectiveHeaderSlot3}
                     {...rest}
                 />
 
@@ -1615,6 +1708,9 @@ const DataTable = forwardRef(
                                             selectAll={selectAll}
                                             sortConfig={sortConfig}
                                             enableInlineEdit={enableInlineEdit}
+                                            showActionsColumn={
+                                                showActionsColumn
+                                            }
                                             enableColumnManager={
                                                 effectiveEnableColumnManager
                                             }
@@ -1715,6 +1811,7 @@ const DataTable = forwardRef(
                                         {currentData.length > 0 && (
                                             <TableBodyComponent
                                                 currentData={currentData}
+                                                dataVersion={tbodyDataVersion}
                                                 visibleColumns={
                                                     effectiveVisibleColumns as ColumnDefinition<
                                                         Record<string, unknown>
@@ -1740,6 +1837,9 @@ const DataTable = forwardRef(
                                                 enableInlineEdit={
                                                     enableInlineEdit
                                                 }
+                                                showActionsColumn={
+                                                    showActionsColumn
+                                                }
                                                 enableColumnManager={
                                                     effectiveEnableColumnManager
                                                 }
@@ -2005,6 +2105,58 @@ const DataTable = forwardRef(
                     )}
                 </Block>
 
+                {enablePivotTable && (
+                    <PivotTableModal
+                        isOpen={isPivotModalOpen}
+                        onClose={() => setIsPivotModalOpen(false)}
+                        data={processedData as Record<string, unknown>[]}
+                        columns={
+                            visibleColumns as ColumnDefinition<
+                                Record<string, unknown>
+                            >[]
+                        }
+                        title={pivotTableConfig?.title}
+                        description={pivotTableConfig?.description}
+                        showExport={pivotTableConfig?.showExport}
+                        previewColumns={pivotTableConfig?.previewColumns}
+                        previewRows={
+                            pivotTableConfig?.previewRows as
+                                | ({
+                                      __pivotId: string
+                                  } & Record<string, unknown>)[]
+                                | undefined
+                        }
+                        availableAggregations={
+                            pivotTableConfig?.availableAggregations
+                        }
+                        initialConfig={
+                            pivotTableConfig?.initialConfig as
+                                | Partial<
+                                      PivotTableConfig<Record<string, unknown>>
+                                  >
+                                | undefined
+                        }
+                        onConfigChange={
+                            pivotTableConfig?.onConfigChange as
+                                | ((
+                                      config: PivotTableConfig<
+                                          Record<string, unknown>
+                                      >
+                                  ) => void)
+                                | undefined
+                        }
+                        onExport={
+                            pivotTableConfig?.onExport as
+                                | ((
+                                      config: PivotTableConfig<
+                                          Record<string, unknown>
+                                      >
+                                  ) => void)
+                                | undefined
+                        }
+                    />
+                )}
+
                 {mobileConfig.enableColumnOverflow && selectedRowForDrawer && (
                     <MobileColumnDrawer
                         isOpen={mobileDrawerOpen}

package/lib/components/DataTable/PivotTableModal/PivotPreviewPanel.tsx

@@ -0,0 +1,174 @@
+import { forwardRef, useState, useCallback, useEffect } from 'react'
+import Block from '../../Primitives/Block/Block'
+import PrimitiveText from '../../Primitives/PrimitiveText/PrimitiveText'
+import Button from '../../Button/Button'
+import { ButtonSize, ButtonType } from '../../Button/types'
+import DataTable from '../DataTable'
+import { NoScrollbar } from './pivotModal.styled'
+import { PivotTableIllustration } from './PivotTableIllustration'
+import type { PivotPreviewPanelProps } from './types'
+import type { ColumnDefinition } from '../types'
+
+const PivotPreviewPanel = forwardRef<HTMLDivElement, PivotPreviewPanelProps>(
+    (
+        {
+            pivot,
+            tableToken,
+            showExport,
+            previewRows,
+            previewTableColumns: initialColumns,
+            onExport,
+            hasValues,
+        },
+        ref
+    ) => {
+        const [previewTableColumns, setPreviewTableColumns] =
+            useState<ColumnDefinition<Record<string, unknown>>[]>(
+                initialColumns
+            )
+
+        useEffect(() => {
+            setPreviewTableColumns(initialColumns)
+        }, [initialColumns])
+
+        const handleHeaderChange = useCallback(
+            (field: keyof Record<string, unknown>, newHeader: string) => {
+                setPreviewTableColumns((prev) =>
+                    prev.map((col) =>
+                        col.field === field
+                            ? { ...col, header: newHeader }
+                            : col
+                    )
+                )
+            },
+            []
+        )
+
+        const hasPreviewGrid =
+            previewTableColumns.length > 0 &&
+            previewRows &&
+            previewRows.length > 0
+        const showEmptyState = !hasValues || !hasPreviewGrid
+
+        return (
+            <NoScrollbar
+                ref={ref}
+                style={{
+                    padding: '0',
+                    overflow: 'auto',
+                    backgroundColor: 'transparent',
+                    display: 'flex',
+                    flexDirection: 'column',
+                    height: '100%',
+                }}
+            >
+                {showEmptyState ? (
+                    <Block
+                        style={{
+                            display: 'flex',
+                            flexDirection: 'column',
+                            alignItems: 'center',
+                            justifyContent: 'center',
+                            flex: 1,
+                            minHeight: '300px',
+                        }}
+                    >
+                        <PivotTableIllustration />
+                        <PrimitiveText
+                            style={{
+                                fontSize: pivot.emptyState.titleFontSize,
+                                color: pivot.emptyState.titleColor,
+                                marginTop: pivot.spacing.iconBadgeGap,
+                                fontWeight: 500,
+                            }}
+                        >
+                            Rows
+                        </PrimitiveText>
+                    </Block>
+                ) : (
+                    <Block
+                        style={{
+                            flex: 1,
+                            display: 'flex',
+                            flexDirection: 'column',
+                            overflow: 'hidden',
+                        }}
+                    >
+                        {showExport && (
+                            <Block
+                                display="flex"
+                                alignItems="center"
+                                justifyContent="space-between"
+                                style={{
+                                    marginBottom:
+                                        pivot.preview.headerMarginBottom,
+                                }}
+                            >
+                                <Button
+                                    text="Export CSV"
+                                    buttonType={ButtonType.SECONDARY}
+                                    size={ButtonSize.SMALL}
+                                    onClick={onExport}
+                                    disabled={!previewRows?.length}
+                                />
+                            </Block>
+                        )}
+                        <Block style={{ flex: 1, overflow: 'auto' }}>
+                            <DataTable
+                                key={`pivot-preview-${previewRows?.length || 0}-${previewTableColumns.length}`}
+                                data={
+                                    (previewRows || []) as Record<
+                                        string,
+                                        unknown
+                                    >[]
+                                }
+                                columns={previewTableColumns}
+                                idField="__pivotId"
+                                pagination={{
+                                    currentPage: 1,
+                                    pageSize: Math.max(
+                                        previewRows?.length || 0,
+                                        1
+                                    ),
+                                    totalRows: previewRows?.length || 0,
+                                    pageSizeOptions: [
+                                        Math.max(previewRows?.length || 0, 1),
+                                    ],
+                                }}
+                                enableSearch={false}
+                                enableFiltering={false}
+                                enableAdvancedFilter={false}
+                                enableColumnManager={false}
+                                enableColumnReordering={false}
+                                enableRowExpansion={false}
+                                enableRowSelection={false}
+                                enableInlineEdit={true}
+                                showActionsColumn={false}
+                                onHeaderChange={handleHeaderChange}
+                                showHeader
+                                showToolbar={false}
+                                showFooter={false}
+                                getRowStyle={(row) =>
+                                    row.__pivotRowType === 'grand_total' ||
+                                    row.__pivotRowType === 'subtotal'
+                                        ? {
+                                              backgroundColor:
+                                                  tableToken.dataTable.table
+                                                      .header.backgroundColor,
+                                              fontWeight:
+                                                  pivot.preview.titleFontWeight,
+                                          }
+                                        : {}
+                                }
+                            />
+                        </Block>
+                    </Block>
+                )}
+            </NoScrollbar>
+        )
+    }
+)
+
+PivotPreviewPanel.displayName = 'PivotPreviewPanel'
+
+export default PivotPreviewPanel

package/lib/components/DataTable/PivotTableModal/PivotTableIllustration.tsx

@@ -0,0 +1,28 @@
+/**
+ * Pivot Table Illustration Component
+ * Displays when no pivot configuration is set
+ * Uses optimized PNG illustration with proper sizing
+ */
+
+// Import the pivot table illustration image
+import pivotTableIllustration from './pivot-table-illustration.png'
+
+export const PivotTableIllustration = () => {
+    return (
+        <img
+            src={pivotTableIllustration}
+            alt="Pivot table illustration"
+            width={255}
+            height={150}
+            style={{
+                objectFit: 'contain',
+                objectPosition: 'center',
+                userSelect: 'none',
+                pointerEvents: 'none',
+                display: 'block',
+            }}
+        />
+    )
+}
+
+export default PivotTableIllustration