@campxdev/react-blueprint 2.3.11 → 3.0.0-alpha.1

package/src/components/DataDisplay/DataTable/DataTable.tsx

@@ -1,89 +1,305 @@
-import { Stack, styled } from '@mui/material';
+import { cn } from '@/lib/utils';
+import { Checkbox } from '@/shadcn-components/Input/Checkbox/Checkbox';
 import {
-  DataGrid as MuiDataGrid,
-  DataGridProps as MuiDataGridProps,
-} from '@mui/x-data-grid';
-import { v4 } from 'uuid';
-import { TablePagination } from './TablePagination';
+  ColumnDef,
+  getCoreRowModel,
+  getSortedRowModel,
+  Row,
+  RowSelectionState,
+  SortingState,
+  useReactTable,
+} from '@tanstack/react-table';
+import { Axios } from 'axios';
+import React from 'react';
+import { usePageHeader } from '../../../hooks/usePageHeader';
+import CardsView from './components/CardsView';
+import { TableActionHeader } from './components/TableHeaders/TableActionHeader';
+import { TableSelectionHeader } from './components/TableHeaders/TableSelectionHeader';
+import {
+  TablePagination,
+  type PaginationProps,
+} from './components/TablePagination';
+import TableView from './components/TableView';
+import {
+  addRowIds,
+  hasAnySortableColumn,
+  processColumnsForSorting,
+} from './components/utils';
 
-export type DataTableProps = {
+type DataTableProps<TData = any> = {
+  // Pagination props
   limit?: number;
   offset?: number;
   totalCount?: number;
   onPageChange?: (page: number) => void;
   onLimitChange?: (limit: number) => void;
-} & MuiDataGridProps;
 
-export const DataTable = (props: DataTableProps) => {
+  // Table props
+  columns: ColumnDef<TData, any>[];
+  rows: TData[];
+  density?: 'standard' | 'compact' | 'comfortable';
+  columnVisibilityModel?: { [x: string]: boolean };
+
+  //loading
+  isLoading?: boolean;
+
+  // Row selection props
+  checkboxSelection?: boolean;
+  rowSelectionModel?: Record<string, boolean>;
+  onRowSelectionModelChange?: (
+    newRowSelectionModel: Record<string, boolean>,
+  ) => void;
+  selectionActions?: React.ReactNode[];
+
+  // Sorting props
+  enableSorting?: boolean;
+  sortingState?: SortingState;
+  onSortingChange?: (newSortingState: SortingState) => void;
+
+  // Action Header props
+  hideTableActionHeader?: boolean;
+  tableActionProps?: {
+    uniqueId: string;
+    viewsProps: {
+      type: string;
+      axios: Axios;
+    };
+  };
+
+  // Card view props
+  cards: React.ReactNode[];
+
+  // Optional customization
+  className?: string;
+  tableClassName?: string;
+  headerClassName?: string;
+  rowClassName?: string | ((row: Row<TData>) => string);
+  cellClassName?: string;
+  cardContainerClassName?: string;
+};
+
+const DataTable = <TData extends Record<string, any> = any>(
+  props: DataTableProps<TData>,
+) => {
   const {
     limit,
     offset,
     totalCount,
     onPageChange,
     onLimitChange,
-    density,
+    density = 'standard',
     rows,
+    columns,
+    checkboxSelection = false,
+    rowSelectionModel = {},
+    onRowSelectionModelChange,
+    selectionActions = [],
+    enableSorting = false,
+    sortingState = [],
+    onSortingChange,
+    hideTableActionHeader,
+    tableActionProps,
+    className,
+    tableClassName,
+    headerClassName,
+    rowClassName,
+    cellClassName,
+    isLoading = false,
+    columnVisibilityModel,
   } = props;
 
-  const getRowHeightByDensity = (): number => {
-    switch (density) {
-      case 'standard':
-        return 48;
-      case 'compact':
-        return 36;
-      case 'comfortable':
-        return 60;
-      default:
-        return 48;
+  // Get layout mode and column visibility from Redux if tableActionProps is provided
+  const { layoutMode: reduxLayoutMode, setLayoutMode } = usePageHeader();
+  const layoutMode = tableActionProps ? reduxLayoutMode : 'table';
+
+  // Generate IDs for rows that don't have them
+  const rowsWithIds = React.useMemo(
+    () => (isLoading ? [] : addRowIds(rows)),
+    [rows, isLoading],
+  );
+
+  // Internal row selection state (used when not controlled)
+  const [internalRowSelection, setInternalRowSelection] =
+    React.useState<RowSelectionState>({});
+
+  // Internal sorting state (used when not controlled)
+  const [internalSorting, setInternalSorting] = React.useState<SortingState>(
+    [],
+  );
+
+  // Use controlled selection if provided, otherwise use internal state
+  const rowSelection = onRowSelectionModelChange
+    ? rowSelectionModel
+    : internalRowSelection;
+
+  // Use controlled sorting if provided, otherwise use internal state
+  const sorting = onSortingChange ? sortingState : internalSorting;
+
+  // Create checkbox column
+  const selectColumn: ColumnDef<TData, any> = React.useMemo(
+    () => ({
+      id: 'select',
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected() ||
+            (table.getIsSomePageRowsSelected() ? 'indeterminate' : false)
+          }
+          onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="Select all rows"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={(value) => row.toggleSelected(!!value)}
+          aria-label={`Select row ${row.id}`}
+        />
+      ),
+      enableSorting: false,
+      enableHiding: false,
+    }),
+    [],
+  );
+
+  // Process columns to handle sorting at column level
+  const processedColumns = React.useMemo(
+    () => processColumnsForSorting(columns, enableSorting),
+    [columns, enableSorting],
+  );
+
+  // Combine columns with checkbox column if enabled
+  const tableColumns = React.useMemo(() => {
+    return checkboxSelection
+      ? [selectColumn, ...processedColumns]
+      : processedColumns;
+  }, [checkboxSelection, selectColumn, processedColumns]);
+
+  // Determine if sorting should be enabled globally
+  const shouldEnableSorting =
+    enableSorting || hasAnySortableColumn(processedColumns);
+
+  /**
+   * Ensure columnVisibility is properly formatted for React Table
+   * React Table treats undefined or missing values as visible (true)
+   * and only hides columns when the value is explicitly false
+   */
+  const visibilityState = React.useMemo(() => {
+    if (
+      !columnVisibilityModel ||
+      Object.keys(columnVisibilityModel).length === 0
+    ) {
+      return {};
+    }
+    const converted: Record<string, boolean> = {};
+    Object.entries(columnVisibilityModel).forEach(([colId, isHidden]) => {
+      if (isHidden === true) {
+        converted[colId] = false;
+      }
+    });
+    return converted;
+  }, [columnVisibilityModel]);
+
+  const table = useReactTable({
+    data: rowsWithIds,
+    columns: tableColumns,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    manualPagination: true,
+    manualSorting: false,
+    enableSorting: shouldEnableSorting,
+    enableRowSelection: checkboxSelection,
+    state: {
+      rowSelection,
+      sorting,
+      columnVisibility: visibilityState,
+    },
+    onRowSelectionChange: (updaterOrValue) => {
+      const newSelection =
+        typeof updaterOrValue === 'function'
+          ? updaterOrValue(rowSelection)
+          : updaterOrValue;
+
+      if (onRowSelectionModelChange) {
+        onRowSelectionModelChange(newSelection);
+      } else {
+        setInternalRowSelection(newSelection);
+      }
+    },
+    onSortingChange: (updaterOrValue) => {
+      const newSorting =
+        typeof updaterOrValue === 'function'
+          ? updaterOrValue(sorting)
+          : updaterOrValue;
+
+      if (onSortingChange) {
+        onSortingChange(newSorting);
+      } else {
+        setInternalSorting(newSorting);
+      }
+    },
+    getRowId: (row) => String(row.id),
+  });
+
+  // Clear all selections handler
+  const handleClearSelection = () => {
+    if (onRowSelectionModelChange) {
+      onRowSelectionModelChange({});
+    } else {
+      setInternalRowSelection({});
     }
   };
 
   return (
-    <MuiDataGrid
-      disableColumnFilter
-      disableColumnMenu
-      disableColumnSorting
-      getRowId={(row) => row.id ?? v4()}
-      getRowHeight={getRowHeightByDensity}
-      rows={rows}
-      {...props}
-      slots={{
-        ...props.slots,
-        pagination: () => {
-          if (
-            limit === undefined ||
-            offset === undefined ||
-            totalCount === undefined ||
-            onPageChange === undefined ||
-            onLimitChange === undefined
-          ) {
-            return <></>;
-          }
-          const pages = Math.ceil(totalCount / limit);
-          const currentPage = Math.ceil(offset / limit) + 1;
-          return (
-            <TablePagination
-              count={pages}
-              page={currentPage}
-              limit={limit}
-              offset={offset}
-              totalCount={totalCount}
-              onPageChange={onPageChange}
-              onLimitChange={onLimitChange}
-              rowCount={rows?.length || 0}
+    <div className={cn('flex flex-col gap-2 bg-transparent', className)}>
+      {!hideTableActionHeader && tableActionProps && (
+        <>
+          {checkboxSelection && Object.keys(rowSelection)?.length > 0 ? (
+            <TableSelectionHeader
+              selectedCount={Object.keys(rowSelection)?.length}
+              onClearSelection={handleClearSelection}
+              actions={selectionActions}
+            />
+          ) : (
+            <TableActionHeader
+              layoutMode={layoutMode}
+              onLayoutChange={setLayoutMode}
+              uniqueId={tableActionProps.uniqueId}
+              columns={tableColumns}
+              viewsProps={tableActionProps.viewsProps}
             />
-          );
-        },
-      }}
-    />
+          )}
+        </>
+      )}
+
+      {layoutMode === 'card' ? (
+        <CardsView {...props} />
+      ) : (
+        <TableView
+          table={table}
+          rows={rows}
+          columns={tableColumns}
+          density={density}
+          tableClassName={tableClassName}
+          headerClassName={headerClassName}
+          isLoading={isLoading}
+          rowClassName={rowClassName}
+          cellClassName={cellClassName}
+          limit={limit}
+          offset={offset}
+          totalCount={totalCount}
+          onPageChange={onPageChange}
+          onLimitChange={onLimitChange}
+        />
+      )}
+    </div>
   );
 };
 
-export const CellContainer = styled(Stack)(({ theme }) => ({
-  display: 'flex',
-  alignItems: 'center',
-  height: '100%',
-  flexDirection: 'row',
-  justifyContent: 'flex-start',
-  gap: '12px',
-}));
+export {
+  DataTable,
+  TablePagination,
+  type ColumnDef,
+  type DataTableProps,
+  type PaginationProps,
+};

package/src/components/DataDisplay/DataTable/components/CardsView.tsx

@@ -0,0 +1,76 @@
+import { cn } from '@/lib/utils';
+import { Card } from '@/shadcn-components/DataDisplay/Card/Card';
+import { Typography } from '@/shadcn-components/DataDisplay/Typography/Typography';
+import { Skeleton } from '../../Skeleton/Skeleton';
+import { DataTableProps } from '../DataTable';
+import { TablePagination } from './TablePagination';
+
+const CardsView = <TData extends Record<string, any> = any>({
+  cards,
+  cardContainerClassName = '',
+  limit,
+  offset,
+  totalCount,
+  onPageChange,
+  onLimitChange,
+  isLoading,
+}: DataTableProps<TData>) => {
+  return (
+    <Card
+      className={cn('w-full rounded-md border bg-background p-0 m-0 gap-0')}
+    >
+      <Typography
+        className="border-b p-3 bg-secondary text-muted-foreground"
+        variant={'small'}
+      >{`Showing ${cards?.length} cards`}</Typography>
+      <div
+        className={cn(
+          'grid gap-2 p-3',
+          'grid-cols-1',
+          'sm:grid-cols-2',
+          'md:grid-cols-2',
+          'lg:grid-cols-3',
+          'xl:grid-cols-4',
+          cardContainerClassName,
+        )}
+      >
+        {isLoading ? (
+          Array.from({ length: 8 }).map((_, index) => (
+            <div key={`skeleton-card-${index}`} className="flex flex-col h-full gap-3">
+              <Skeleton className="h-40 w-full rounded-lg" />
+              <Skeleton className="h-4 w-3/4" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+          ))
+        ) : cards && cards.length > 0 ? (
+          cards.map((card, index) => (
+            <div key={index} className={cn('flex flex-col', 'h-full')}>
+              {card}
+            </div>
+          ))
+        ) : (
+          <div className="col-span-full p-4 text-center border rounded-md">
+            <p className="text-muted-foreground">No cards available</p>
+          </div>
+        )}
+      </div>
+      {/* Pagination */}
+      {limit !== undefined &&
+        offset !== undefined &&
+        totalCount !== undefined &&
+        onPageChange !== undefined &&
+        onLimitChange !== undefined && (
+          <TablePagination
+            limit={limit}
+            offset={offset}
+            totalCount={totalCount}
+            onPageChange={onPageChange}
+            onLimitChange={onLimitChange}
+            rowCount={cards?.length || 0}
+          />
+        )}
+    </Card>
+  );
+};
+
+export default CardsView;

package/src/components/DataDisplay/DataTable/components/ColumnSelector/ColumnSelector.tsx

@@ -0,0 +1,97 @@
+import { cn } from '@/lib/utils';
+import { ColumnDef } from '@tanstack/react-table';
+import { Columns3, Eye, EyeOff } from 'lucide-react';
+import React from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+import { setColumnVisibilityModelForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../../redux/store';
+import { Button, DropdownMenu } from '../../../../export';
+
+interface ColumnSelectorProps {
+  columns: ColumnDef<any, any>[];
+  uniqueId: string;
+}
+
+const ColumnSelector: React.FC<ColumnSelectorProps> = ({
+  columns,
+  uniqueId,
+}) => {
+  const dispatch = useDispatch();
+
+  // Get current column visibility state from Redux
+  const columnVisibilityModel = useSelector(
+    (state: RootState) =>
+      state.pageHeader[uniqueId]?.columnVisibilityModel || {},
+  );
+
+  // Extract column IDs (filter out 'select' column which shouldn't be toggleable)
+  // For columns without explicit ID, use accessorKey as fallback
+  const visibleColumns = columns.filter((col) => {
+    const columnId = col.id || (col as any).accessorKey;
+    return columnId !== 'select';
+  });
+
+  const handleColumnToggle = (columnId: string) => {
+    // When a column is visible in Redux, columnVisibilityModel[columnId] is undefined or false
+    // When a column is hidden in Redux, columnVisibilityModel[columnId] is true
+    // This is inverted logic specific to this implementation
+    const isCurrentlyHidden = columnVisibilityModel[columnId] === true;
+    const updatedModel = {
+      ...columnVisibilityModel,
+      [columnId]: !isCurrentlyHidden,
+    };
+    dispatch(
+      setColumnVisibilityModelForUniqueId({
+        uniqueId,
+        columnVisibilityModel: updatedModel,
+      }),
+    );
+  };
+
+  return (
+    <DropdownMenu
+      anchor={({ open }) => (
+        <Button variant="outline" onClick={open} size={'icon-sm'}>
+          <Columns3 size={16} />
+        </Button>
+      )}
+      menu={() =>
+        visibleColumns.map((column) => {
+          // React Table uses accessorKey as the column ID if no explicit id is set
+          const columnId = column.id || (column as any).accessorKey || '';
+          if (!columnId) return null;
+
+          // Column is hidden when columnVisibilityModel[columnId] === true
+          // Column is visible when columnVisibilityModel[columnId] is undefined or false
+          const isHidden = columnVisibilityModel[columnId] === true;
+          const columnHeader =
+            typeof column.header === 'string' ? column.header : columnId;
+
+          return (
+            <div
+              key={columnId}
+              className="flex items-center justify-between p-1 hover:bg-accent cursor-pointer"
+              onClick={() => handleColumnToggle(columnId)}
+            >
+              <span
+                className={cn(
+                  'text-sm',
+                  isHidden ? 'text-muted-foreground' : '',
+                )}
+              >
+                {columnHeader}
+              </span>
+              {!isHidden ? (
+                <Eye className="w-4 h-4 text-primary" />
+              ) : (
+                <EyeOff className="w-4 h-4 text-muted-foreground" />
+              )}
+            </div>
+          );
+        })
+      }
+    />
+  );
+};
+
+export default ColumnSelector;

package/src/components/DataDisplay/DataTable/components/DensitySelector/DensitySelector.tsx

@@ -0,0 +1,66 @@
+import { capitalize } from 'lodash';
+import { Rows2, Rows3, Rows4 } from 'lucide-react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { setDensityForUniqueId } from '../../../../../redux/slices/pageHeaderSlice';
+import { RootState } from '../../../../../redux/store';
+import { Button, DropdownMenu, DropdownMenuItem } from '../../../../export';
+
+type GridDensity = 'standard' | 'compact' | 'comfortable';
+
+export type DensitySelectorProps = {
+  uniqueId: string;
+};
+
+const DensitySelector = ({ uniqueId }: DensitySelectorProps) => {
+  const dispatch = useDispatch();
+  const density = useSelector(
+    (state: RootState) => state.pageHeader[uniqueId]?.density || 'standard',
+  );
+  const gridDensity: GridDensity[] = ['compact', 'standard', 'comfortable'];
+
+  const getIcon = (type: GridDensity) => {
+    switch (type) {
+      case 'standard':
+        return <Rows3 size={16} />;
+      case 'compact':
+        return <Rows4 size={16} />;
+      case 'comfortable':
+        return <Rows2 size={16} />;
+    }
+  };
+
+  const handleMenuClick = (value: GridDensity) => {
+    dispatch(
+      setDensityForUniqueId({
+        uniqueId: uniqueId,
+        density: value,
+      }),
+    );
+  };
+
+  return (
+    <DropdownMenu
+      anchor={({ open }) => (
+        <Button variant="outline" onClick={open} size={'icon-sm'}>
+          {getIcon(density)}
+        </Button>
+      )}
+      menu={({ close }) =>
+        gridDensity.map((item) => (
+          <DropdownMenuItem
+            key={item}
+            icon={getIcon(item)}
+            label={capitalize(item)}
+            onClick={() => {
+              handleMenuClick(item);
+              close();
+            }}
+          />
+        ))
+      }
+    />
+  );
+};
+
+export default DensitySelector;