@dxos/react-ui-table 0.4.9 → 0.4.10-main.0be5154

package/src/components/Table/TableBody.tsx

@@ -28,10 +28,15 @@ const TableBody = ({ rows }: TableBodyProps) => {
       {rows.map((row) => {
         const isCurrent = currentDatum === row.original;
         const isSelected = rowSelection?.[row.id];
+
+        const isPinned = row.getIsPinned();
+
+        const classNames = tbodyTr({ canBeCurrent, isPinned: isPinned !== false });
+
         return (
           <tr
             key={keyAccessor ? keyAccessor(row.original) : row.id}
-            className={tbodyTr({ canBeCurrent })}
+            className={classNames}
             {...(isCurrent && { 'aria-current': 'location' })}
             {...(isSelected && { 'aria-selected': 'true' })}
             {...(canBeCurrent && {

package/src/components/hooks/useColumnSorting.ts

@@ -0,0 +1,54 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type SortDirection, type Column } from '@tanstack/react-table';
+import { useState } from 'react';
+
+export const useColumnSorting = (column: Column<any>) => {
+  const [sortDirection, setSortDirection] = useState<SortDirection | false>(column.getIsSorted());
+  const [firstSort, setFirstSort] = useState<SortDirection | undefined>();
+
+  const canSort = column.getCanSort();
+
+  const updateColumnSort = (direction: SortDirection | false) => {
+    setSortDirection(direction);
+
+    switch (direction) {
+      case false:
+        column.clearSorting();
+        break;
+      case 'asc':
+        column.toggleSorting(false); // descending false
+        break;
+      case 'desc':
+        column.toggleSorting(true); // descending true
+        break;
+    }
+  };
+
+  // Whichever sort is explicitly set first, will be the first sort direction
+  // When toggling, we always go to the other direction, and then to unsorted.
+  const onToggleSort = () => {
+    if (sortDirection === false) {
+      return;
+    }
+
+    if (sortDirection === firstSort) {
+      updateColumnSort(firstSort === 'asc' ? 'desc' : 'asc');
+    } else {
+      updateColumnSort(false);
+    }
+  };
+
+  const onSelectSort = (direction: SortDirection) => {
+    setFirstSort(direction);
+    updateColumnSort(direction);
+  };
+
+  const onClearSort = () => {
+    updateColumnSort(false);
+  };
+
+  return { canSort, sortDirection, onSelectSort, onToggleSort, onClearSort };
+};

package/src/components/hooks/usePinLastRow.ts

@@ -0,0 +1,43 @@
+//
+// Copyright 2024 DXOS.org
+//
+
+import { type Table } from '@tanstack/react-table';
+import { useEffect, useState } from 'react';
+
+export const usePinLastRow = (
+  pinLastRow: boolean | undefined,
+  table: Table<any>,
+  data: any,
+  getScrollElement?: () => Element | null,
+) => {
+  const [pinnedRowKey, setPinnedRowKey] = useState<string>();
+
+  useEffect(() => {
+    if (!pinLastRow) {
+      return;
+    }
+
+    const rows = table.getRowModel().rows;
+    const rowToPin = rows[rows.length - 1];
+    const rowId = rowToPin.id;
+
+    if (rowId === pinnedRowKey) {
+      return;
+    }
+
+    table.resetRowPinning();
+    rowToPin.pin('bottom');
+
+    const scrollElement = getScrollElement?.();
+    const isFirstRender = pinnedRowKey === undefined;
+
+    if (scrollElement && !isFirstRender) {
+      requestAnimationFrame(() => {
+        scrollElement.scrollTo({ top: scrollElement.scrollHeight });
+      });
+    }
+
+    setPinnedRowKey(rowId);
+  }, [pinLastRow, table, getScrollElement, pinnedRowKey, setPinnedRowKey, data]);
+};

package/src/helpers.tsx

@@ -340,7 +340,7 @@ export class ColumnBuilder<TData extends RowData> {
         ...props.meta,
         onUpdate,
         digits,
-        header: { classNames: 'text-end', ...props.meta?.header },
+        header: { ...props.meta?.header },
         cell: { ...props.meta?.cell, classNames },
       },
     };

package/src/theme.ts

@@ -75,13 +75,14 @@ export const theadResizeRoot: ComponentFunction<{ isResizing: boolean }> = ({ is
 export type TbodyStyleProps = Partial<TableContextValue<any>>;
 export const tbodyRoot: ComponentFunction<TbodyStyleProps> = (_props, ...etc) => mx(...etc);
 
-export type TbodyTrStyleProps = Partial<{ canBeCurrent?: boolean }>;
-export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent }, ...etc) =>
+export type TbodyTrStyleProps = Partial<{ canBeCurrent?: boolean; isPinned?: boolean }>;
+export const tbodyTr: ComponentFunction<TbodyTrStyleProps> = ({ canBeCurrent, isPinned }, ...etc) =>
   mx(
     'group',
     canBeCurrent ? ghostSelectedCurrent : ghostSelected,
     canBeCurrent && focusRing,
     canBeCurrent && 'cursor-pointer rounded',
+    isPinned && 'sticky z-1 bottom-[-1px] base-surface',
     ...etc,
   );
 

package/dist/types/src/components/SortButton.d.ts

@@ -1,8 +0,0 @@
-import { type SortDirection } from '@tanstack/react-table';
-type SortButtonProps = {
-    sortDirection: false | SortDirection;
-    onClick: (e: any) => void;
-};
-export declare const SortButton: ({ sortDirection, onClick }: SortButtonProps) => JSX.Element;
-export {};
-//# sourceMappingURL=SortButton.d.ts.map

package/dist/types/src/components/SortButton.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"SortButton.d.ts","sourceRoot":"","sources":["../../../../src/components/SortButton.tsx"],"names":[],"mappings":"AAKA,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAM3D,KAAK,eAAe,GAAG;IAAE,aAAa,EAAE,KAAK,GAAG,aAAa,CAAC;IAAC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,KAAK,IAAI,CAAA;CAAE,CAAC;AAE3F,eAAO,MAAM,UAAU,+BAAgC,eAAe,gBAoBrE,CAAC"}

package/src/components/SortButton.tsx

@@ -1,34 +0,0 @@
-//
-// Copyright 2024 DXOS.org
-//
-
-import { CaretUpDown, SortAscending, SortDescending } from '@phosphor-icons/react';
-import { type SortDirection } from '@tanstack/react-table';
-import React, { type ReactElement } from 'react';
-
-import { Button } from '@dxos/react-ui';
-import { getSize } from '@dxos/react-ui-theme';
-
-type SortButtonProps = { sortDirection: false | SortDirection; onClick: (e: any) => void };
-
-export const SortButton = ({ sortDirection, onClick }: SortButtonProps) => {
-  let icon: ReactElement;
-  const size = getSize(4);
-
-  switch (sortDirection) {
-    case 'asc':
-      icon = <SortAscending className={size} />;
-      break;
-    case 'desc':
-      icon = <SortDescending className={size} />;
-      break;
-    default:
-      icon = <CaretUpDown className={size} />;
-  }
-
-  return (
-    <Button variant='ghost' onClick={onClick}>
-      {icon}
-    </Button>
-  );
-};