@dmsi/wedgekit-react 0.0.28 → 0.0.30

package/src/components/DataGrid.tsx

@@ -4,6 +4,7 @@ import React, { ReactNode, useCallback, useId, useRef, useState } from "react";
 
 // TanStack Table
 import {
+  Cell,
   Column,
   ColumnDef,
   ColumnFiltersState,
@@ -13,6 +14,7 @@ import {
   getFilteredRowModel,
   getSortedRowModel,
   Header,
+  HeaderGroup,
   PartialKeys,
   RowData,
   SortDirection,
@@ -50,6 +52,7 @@ import { restrictToHorizontalAxis } from "@dnd-kit/modifiers";
 import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
 import {
+  DataCellHeader,
   DataGridCell,
   DragAlongCell,
   DraggableCellHeader,
@@ -118,6 +121,8 @@ export interface DataGridProps<T extends Record<string, unknown>> {
   hideStatusBar?: boolean;
   centerHeader?: boolean;
   enableColumnSelector?: boolean;
+  predeterminedLeftPins?: string[];
+  predeterminedRightPins?: string[];
 }
 
 export function DataGrid<T extends Record<string, unknown>>({
@@ -141,6 +146,8 @@ export function DataGrid<T extends Record<string, unknown>>({
   hideStatusBar,
   centerHeader,
   enableColumnSelector,
+  predeterminedLeftPins = [],
+  predeterminedRightPins = []
 }: DataGridProps<T>) {
   const [columnOrder, setColumnOrder] = useState<string[]>(() =>
     columns.map((c) => c.id!),
@@ -256,19 +263,39 @@ export function DataGrid<T extends Record<string, unknown>>({
       rowSelection,
       columnVisibility,
     },
+    initialState: {
+      columnPinning: {
+        left: predeterminedLeftPins,
+        right: predeterminedRightPins,
+      }
+    },
     onColumnOrderChange: setColumnOrder,
     onSortingChange: adaptTableStateSetter(setSortingState),
     onColumnFiltersChange: adaptTableStateSetter(setColumnFilterState),
     onRowSelectionChange: adaptTableStateSetter(setRowSelection),
     filterFns: {
-      startsWith: (row, columnId, filterValue) =>
-        (row.getValue(columnId) as string)
-          ?.toLowerCase()
-          .startsWith(filterValue.toLowerCase()),
-      endsWith: (row, columnId, filterValue) =>
-        (row.getValue(columnId) as string)
-          ?.toLowerCase()
-          .endsWith(filterValue.toLowerCase()),
+      startsWith: (row, columnId, filterValue) => {
+        const cellValue = row?.getValue(columnId);
+
+        if (!cellValue || !filterValue) {
+          return true
+        }
+
+        return String(cellValue)
+          .toLowerCase()
+          .startsWith(String(filterValue).toLowerCase());
+      },
+      endsWith: (row, columnId, filterValue) => {
+        const cellValue = row?.getValue(columnId);
+
+        if (!cellValue || !filterValue) {
+          return true
+        }
+
+        return String(cellValue)
+          .toLowerCase()
+          .endsWith(String(filterValue).toLowerCase());
+      },
     },
   });
 
@@ -353,6 +380,8 @@ export function DataGrid<T extends Record<string, unknown>>({
       (virtualColumns[virtualColumns.length - 1]?.end ?? 0);
   }
 
+  const empty = table.getRowModel().rows.length === 0;
+
   return (
     <DndContext
       id={dndId}
@@ -370,12 +399,26 @@ export function DataGrid<T extends Record<string, unknown>>({
           className="flex flex-col flex-1 h-full w-full rounded border border-border-primary-normal overflow-hidden text-text-primary-normal"
         >
           <div
-            className="overflow-auto scrollbar-thin relative contain-paint will-change-transform"
+            className={clsx(
+              "flex overflow-auto scrollbar-thin relative contain-paint will-change-transform",
+              empty ? "overflow-y-hidden" : "h-full"
+            )}
             ref={containerRef}
           >
-            <table className="min-w-full grid">
+            <PinnedColumns
+              pinDirection="left"
+              table={table}
+              tableContainerRef={containerRef}
+              pagination={pagination}
+              isLoadingMore={isLoadingMore}
+              hasMore={hasMore}
+              showFilterRow={showFilterRow}
+              enableColumnSelector={enableColumnSelector}
+            />
+              
+            <table className="flex-1 grid min-h-min">
               <thead className="sticky top-0 z-10 grid">
-                {table.getHeaderGroups().map((headerGroup) => (
+                {table.getCenterHeaderGroups().map((headerGroup) => (
                   <tr key={headerGroup.id} className="flex w-full">
                     {virtualPaddingLeft ? (
                       // fake empty column to the left for virtualization scroll padding
@@ -386,6 +429,10 @@ export function DataGrid<T extends Record<string, unknown>>({
 
                     {virtualColumns.map((virtualColumn) => {
                       const header = headerGroup.headers[virtualColumn.index];
+                      if (!header) {
+                        return;
+                      }
+
                       if (typeof header.column.columnDef.header === "string") {
                         const customHeaderWidth =
                           header.column.columnDef.meta?.headerWidth;
@@ -425,23 +472,21 @@ export function DataGrid<T extends Record<string, unknown>>({
                                 </Subheader>
                               )}
 
-                            {!header.column.columnDef.meta?.locked && (
-                              <div
-                                onDoubleClick={(e) => {
-                                  e.stopPropagation();
-                                  header.column.resetSize();
-                                }}
-                                onMouseDown={(e) => {
-                                  e.stopPropagation();
-                                  header.getResizeHandler()(e);
-                                }}
-                                onTouchStart={(e) => {
-                                  e.stopPropagation();
-                                  header.getResizeHandler()(e);
-                                }}
-                                className="absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
-                              />
-                            )}
+                            <div
+                              onDoubleClick={(e) => {
+                                e.stopPropagation();
+                                header.column.resetSize();
+                              }}
+                              onMouseDown={(e) => {
+                                e.stopPropagation();
+                                header.getResizeHandler()(e);
+                              }}
+                              onTouchStart={(e) => {
+                                e.stopPropagation();
+                                header.getResizeHandler()(e);
+                              }}
+                              className="absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                            />
                           </DraggableCellHeader>
                         );
                       }
@@ -505,9 +550,20 @@ export function DataGrid<T extends Record<string, unknown>>({
                 enableColumnSelector={enableColumnSelector}
               />
             </table>
+            
+            <PinnedColumns
+              pinDirection="right"
+              table={table}
+              tableContainerRef={containerRef}
+              pagination={pagination}
+              isLoadingMore={isLoadingMore}
+              hasMore={hasMore}
+              showFilterRow={showFilterRow}
+              enableColumnSelector={enableColumnSelector}
+            />
           </div>
 
-          {table.getRowModel().rows.length === 0 && (
+          {empty && (
             <div
               className={clsx(
                 NO_RESULTS_HEIGHT,
@@ -611,16 +667,18 @@ DataGrid.displayName = "DataGrid";
 
 interface TableBodyProps<TData extends RowData> {
   id?: string;
-  columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   table: Table<TData>;
   tableContainerRef: React.RefObject<HTMLDivElement | null>;
-  virtualPaddingLeft: number | undefined;
-  virtualPaddingRight: number | undefined;
+  virtualPaddingLeft?: number | undefined;
+  virtualPaddingRight?: number | undefined;
   pagination: DataGridPagination | undefined;
   isLoadingMore: boolean;
   hasMore: boolean;
   showFilterRow: boolean;
   enableColumnSelector?: boolean;
+  locked?: boolean;
+  pinDirection?: 'left' | 'right';
 }
 
 // Helpers
@@ -637,6 +695,8 @@ function TableBody<T>({
   hasMore,
   showFilterRow,
   enableColumnSelector = false,
+  locked,
+  pinDirection,
 }: TableBodyProps<T>) {
   const { rows } = table.getRowModel();
 
@@ -648,9 +708,20 @@ function TableBody<T>({
   });
 
   const virtualRows = rowVirtualizer.getVirtualItems();
+  const CellElement = locked ? DataGridCell : DragAlongCell;
+
+  let headerGroups: HeaderGroup<T>[];
+  if (pinDirection === 'left') {
+    headerGroups = table.getLeftHeaderGroups();
+  } else if (pinDirection === 'right') {
+    headerGroups = table.getRightHeaderGroups();
+  } else {
+    headerGroups = table.getCenterHeaderGroups();
+  }
 
   return (
     <tbody
+      className={clsx(locked ? "shadow-16" : "")}
       style={{
         display: "grid",
         height: `${
@@ -673,14 +744,14 @@ function TableBody<T>({
           }}
           className="even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
         >
-          {table.getHeaderGroups().flatMap((x) =>
+          {headerGroups.flatMap((x) =>
             x.headers.map((header) => (
-              <DragAlongCell
+              <CellElement
                 id={id ? `${id}-filter-cell-${header.id}` : undefined}
                 noPadding
                 key={header.id}
                 cell={header}
-                width={header.column.columnDef.meta?.headerWidth}
+                width={header.column.columnDef.meta?.headerWidth || (locked ? `${header.column.getSize()}px` : '')}
               >
                 {header.column.getCanFilter() &&
                   (header.column.columnDef.meta?.filterRowCell?.({
@@ -698,7 +769,7 @@ function TableBody<T>({
                       removeSearchIcon
                     />
                   ))}
-              </DragAlongCell>
+              </CellElement>
             )),
           )}
         </tr>
@@ -719,6 +790,8 @@ function TableBody<T>({
             virtualRow={virtualRow}
             showFilterRow={showFilterRow}
             enableColumnSelector={enableColumnSelector}
+            locked={locked}
+            pinDirection={pinDirection}
           />
         );
       })}
@@ -746,14 +819,16 @@ function TableBody<T>({
 
 interface TableBodyRowProps<T> {
   id?: string;
-  columnVirtualizer: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
   row: Row<T>;
   rowVirtualizer: Virtualizer<HTMLDivElement, HTMLTableRowElement>;
-  virtualPaddingLeft: number | undefined;
-  virtualPaddingRight: number | undefined;
+  virtualPaddingLeft?: number | undefined;
+  virtualPaddingRight?: number | undefined;
   virtualRow: VirtualItem;
   showFilterRow: boolean;
   enableColumnSelector?: boolean;
+  locked?: boolean;
+  pinDirection?: 'left' | 'right';
 }
 
 function TableBodyRow<T>({
@@ -766,15 +841,29 @@ function TableBodyRow<T>({
   virtualRow,
   showFilterRow,
   enableColumnSelector = false,
+  locked,
+  pinDirection,
 }: TableBodyRowProps<T>) {
-  const visibleCells = row.getVisibleCells();
-  const virtualColumns = columnVirtualizer.getVirtualItems();
+  let visibleCells: Cell<T, unknown>[];
+
+  if (locked) {
+    visibleCells = pinDirection === 'left'
+      ? row.getLeftVisibleCells()
+      : row.getRightVisibleCells();
+  } else {
+    visibleCells = row.getCenterVisibleCells();
+  }
+
+  const virtualColumns = columnVirtualizer?.getVirtualItems() ?? [];
+  const columns = locked ? visibleCells : virtualColumns;
 
   const isError =
     typeof row.original === "object" &&
     row.original !== null &&
     "rowState" in row.original &&
     row.original.rowState === "error";
+  
+  const CellElement = locked ? DataGridCell : DragAlongCell;
 
   return (
     <tr
@@ -796,19 +885,26 @@ function TableBodyRow<T>({
         width: "100%",
       }}
     >
-      {virtualPaddingLeft ? (
+      {!locked && virtualPaddingLeft ? (
         // fake empty column to the left for virtualization scroll padding
         <td style={{ display: "flex", width: virtualPaddingLeft }} />
       ) : null}
 
-      {virtualColumns.map((virtualColumn) => {
-        const cell = visibleCells[virtualColumn.index];
+      {columns.map((column) => {
+        const cell = locked 
+          ? (column as Cell<T, unknown>)
+          : visibleCells[(column as VirtualItem).index];
+
+        if (!cell) {
+          return;
+        }
+
         return cell.column.columnDef.meta?.useCustomRenderer ? (
           <React.Fragment key={cell.id}>
             {flexRender(cell.column.columnDef.cell, cell.getContext())}
           </React.Fragment>
         ) : (
-          <DragAlongCell
+          <CellElement
             key={cell.id}
             id={id ? `${id}-cell-${cell.id}` : undefined}
             cell={cell}
@@ -823,20 +919,160 @@ function TableBodyRow<T>({
                 {cell.getValue() as ReactNode | string}
               </Paragraph>
             </Tooltip>
-          </DragAlongCell>
+          </CellElement>
         );
       })}
 
-      {virtualPaddingRight ? (
+      {!locked && virtualPaddingRight ? (
         // fake empty column to the right for virtualization scroll padding
         <td style={{ display: "flex", width: virtualPaddingRight }} />
       ) : null}
 
-      {enableColumnSelector && <td></td>}
+      {enableColumnSelector && !locked && <td className="p-2" style={{ width: '48.8px' }}></td>}
     </tr>
   );
 }
 
+
+interface PinnedColumnsProps<TData extends RowData> {
+  pinDirection: 'left' | 'right';
+  table: Table<TData>;
+  tableContainerRef: React.RefObject<HTMLDivElement | null>;
+  pagination: DataGridPagination | undefined;
+  isLoadingMore: boolean;
+  hasMore: boolean;
+  showFilterRow: boolean;
+  enableColumnSelector?: boolean;
+  centerHeader?: boolean;
+  allSelectedAcrossPages?: boolean;
+  someSelectedAcrossPages?: boolean;
+  toggleSelectAllAcrossPages?: () => void;
+}
+
+function PinnedColumns<TData>({
+  pinDirection = "left",
+  table,
+  centerHeader,
+  allSelectedAcrossPages,
+  someSelectedAcrossPages,
+  toggleSelectAllAcrossPages,
+  ...props
+} : PinnedColumnsProps<TData>) {
+  const headerGroups = pinDirection === "left"
+    ? table.getLeftHeaderGroups()
+    : table.getRightHeaderGroups();
+
+  return headerGroups[0]?.headers.length > 0 && (
+      <table className={clsx(
+        "grid min-h-min sticky z-20 bg-background-grouped-primary-normal",
+        pinDirection === "left" ? "left-0" : "right-0"
+      )}>
+        <thead className="sticky top-0 z-20 grid">
+          {headerGroups.map((headerGroup) => {
+            return (
+              <tr key={headerGroup.id} className="flex w-full">
+                {headerGroup.headers.map((header) => {
+
+                if (!header) {
+                  return;
+                }
+
+                if (typeof header.column.columnDef.header === "string") {
+                  const customHeaderWidth =
+                    header.column.columnDef.meta?.headerWidth;
+
+                  return (
+                    <DataCellHeader
+                      locked
+                      key={header.id}
+                      header={header}
+                      center={centerHeader}
+                      width={customHeaderWidth}
+                      className={clsx(
+                        header.column.getCanSort()
+                          ? "cursor-pointer"
+                          : "cursor-grab",
+                        "group",
+                      )}
+                    >
+                      <Subheader tall>
+                        {header.column.columnDef.header}
+                      </Subheader>
+
+                      {getSortIcon(header.column.getIsSorted())}
+
+                      {!header.column.getIsSorted() &&
+                        header.column.getCanSort() &&
+                        getSortIcon(
+                          header.column.getNextSortingOrder(),
+                          true,
+                        )}
+
+                      {header.column.getSortIndex() !== -1 &&
+                        table.getState().sorting.length > 1 && (
+                          <Subheader tall>
+                            {header.column.getSortIndex() + 1}
+                          </Subheader>
+                        )}
+
+                      {!header.column.columnDef.meta?.locked && (
+                        <div
+                          onDoubleClick={(e) => {
+                            e.stopPropagation();
+                            header.column.resetSize();
+                          }}
+                          onMouseDown={(e) => {
+                            e.stopPropagation();
+                            header.getResizeHandler()(e);
+                          }}
+                          onTouchStart={(e) => {
+                            e.stopPropagation();
+                            header.getResizeHandler()(e);
+                          }}
+                          className="absolute right-0 inset-y-0 w-px bg-black cursor-col-resize"
+                        />
+                      )}
+                    </DataCellHeader>
+                  );
+                }
+                return (
+                  <React.Fragment key={header.id}>
+                    {header.column.columnDef.meta?.checkbox ? (
+                      <DataGridCell
+                        type="header"
+                        component="checkbox"
+                        locked
+                      >
+                        <Checkbox
+                          checked={allSelectedAcrossPages}
+                          indeterminate={someSelectedAcrossPages}
+                          onChange={toggleSelectAllAcrossPages}
+                        />
+                      </DataGridCell>
+                    ) : (
+                      flexRender(
+                        header.column.columnDef.header,
+                        header.getContext(),
+                      )
+                    )}
+                  </React.Fragment>
+                );
+                })}
+              </tr>
+            )
+          })}
+        </thead>
+
+        <TableBody
+          {...props}
+          table={table}
+          locked={true}
+          pinDirection={pinDirection}
+        />
+      </table>
+    )
+}
+
 const LoadingCell = <T extends RowData>({
   id,
   column,