@dmsi/wedgekit-react 0.0.81 → 0.0.83

package/src/components/DataGrid/TableBody/index.tsx

@@ -0,0 +1,159 @@
+import { HeaderGroup, Row, RowData, Table } from "@tanstack/react-table";
+import { useVirtualizer, Virtualizer } from "@tanstack/react-virtual";
+import { DataGridPagination } from "../types";
+import { DataGridCell, DragAlongCell, Search } from "../..";
+import clsx from "clsx";
+import { TableBodyRow } from "./TableBodyRow";
+import { LoadingCell } from "./LoadingCell";
+
+interface TableBodyProps<TData extends RowData> {
+  id?: string;
+  columnVirtualizer?: Virtualizer<HTMLDivElement, HTMLTableCellElement>;
+  table: Table<TData>;
+  tableContainerRef: React.RefObject<HTMLDivElement | null>;
+  virtualPaddingLeft?: number | undefined;
+  virtualPaddingRight?: number | undefined;
+  pagination: DataGridPagination | undefined;
+  isLoadingMore: boolean;
+  hasMore: boolean;
+  showFilterRow: boolean;
+  enableColumnSelector?: boolean;
+  locked?: boolean;
+  pinDirection?: "left" | "right";
+}
+export function TableBody<T>({
+  id,
+  columnVirtualizer,
+  table,
+  tableContainerRef,
+  virtualPaddingLeft,
+  virtualPaddingRight,
+  pagination,
+  isLoadingMore,
+  hasMore,
+  showFilterRow,
+  enableColumnSelector = false,
+  locked,
+  pinDirection,
+}: TableBodyProps<T>) {
+  const { rows } = table.getRowModel();
+
+  const rowVirtualizer = useVirtualizer<HTMLDivElement, HTMLTableRowElement>({
+    count: rows.length,
+    estimateSize: () => 40,
+    getScrollElement: () => tableContainerRef.current,
+    overscan: 8,
+  });
+
+  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: `${
+          showFilterRow
+            ? rowVirtualizer.getTotalSize() + 40
+            : rowVirtualizer.getTotalSize()
+        }px`, // tells scrollbar how big the table is
+        position: "relative", // needed for absolute positioning of rows
+      }}
+    >
+      {showFilterRow && (
+        <tr
+          style={{
+            display: "flex",
+            position: "sticky",
+            top: "40px",
+            width: "100%",
+            height: "40px",
+            zIndex: 10,
+          }}
+          className="even:bg-background-grouped-primary-normal odd:bg-background-grouped-secondary-normal"
+        >
+          {headerGroups.flatMap((x) =>
+            x.headers.map((header) => (
+              <CellElement
+                id={id ? `${id}-filter-cell-${header.id}` : undefined}
+                noPadding
+                key={header.id}
+                cell={header}
+                width={
+                  header.column.columnDef.meta?.headerWidth ||
+                  (locked ? `${header.column.getSize()}px` : "")
+                }
+              >
+                {header.column.getCanFilter() &&
+                  (header.column.columnDef.meta?.filterRowCell?.({
+                    header,
+                    table,
+                  }) ?? (
+                    <Search
+                      id={id ? `${id}-filter-search-${header.id}` : undefined}
+                      removeRoundness
+                      onChange={(e) =>
+                        header.column.setFilterValue(e.target.value)
+                      }
+                      value={(header.column.getFilterValue() ?? "") as string}
+                      placeholder=""
+                      removeSearchIcon
+                    />
+                  ))}
+              </CellElement>
+            )),
+          )}
+        </tr>
+      )}
+
+      {virtualRows.map((virtualRow) => {
+        const row = rows[virtualRow.index] as Row<T>;
+
+        return (
+          <TableBodyRow
+            id={id}
+            columnVirtualizer={columnVirtualizer}
+            key={row.id}
+            row={row}
+            rowVirtualizer={rowVirtualizer}
+            virtualPaddingLeft={virtualPaddingLeft}
+            virtualPaddingRight={virtualPaddingRight}
+            virtualRow={virtualRow}
+            showFilterRow={showFilterRow}
+            enableColumnSelector={enableColumnSelector}
+            locked={locked}
+            pinDirection={pinDirection}
+          />
+        );
+      })}
+
+      {!pagination && isLoadingMore && hasMore && (
+        <tr
+          style={{
+            display: "flex",
+            position: "absolute",
+            width: "100%",
+            transform: `translateY(${
+              virtualRows[virtualRows.length - 1].start + 40
+            }px)`,
+          }}
+          className="odd:bg-background-grouped-primary-normal even:bg-background-grouped-secondary-normal"
+        >
+          {table.getAllLeafColumns().map((column) => (
+            <LoadingCell id={id} key={column.id} column={column.columnDef} />
+          ))}
+        </tr>
+      )}
+    </tbody>
+  );
+}