nntc-ui 0.0.59 → 0.0.61

package/index.d.ts

@@ -329,6 +329,7 @@ interface Props$8 {
     onFiltersChange?: (filters: FilterBy[]) => void;
     onSortsChange?: (sorts: SortBy[]) => void;
     additionalHeaderContent?: (headerName: string) => ReactNode;
+    showRowsNumbers?: boolean;
 }
 declare function VirtualTable(props: UiProps<Props$8>): react_jsx_runtime.JSX.Element;
 

package/index.js

@@ -2536,6 +2536,7 @@ import { defaultRangeExtractor, useVirtualizer } from "@tanstack/react-virtual";
 import classnames22 from "classnames";
 import dayjs4 from "dayjs";
 import { Fragment as Fragment8, useCallback as useCallback9, useEffect as useEffect8, useMemo as useMemo8, useRef as useRef11, useState as useState15 } from "react";
+import { v4 as uuidv46 } from "uuid";
 
 // src/utils/toFirstLetterUpperCase.ts
 var toFirstLetterUpperCase = (name) => {
@@ -3295,12 +3296,29 @@ function VirtualTable(props) {
     globalSorts,
     onFiltersChange,
     onSortsChange,
-    additionalHeaderContent
+    additionalHeaderContent,
+    showRowsNumbers
   } = props;
+  const fixedWithNumbersCount = fixedColumnsCount + (showRowsNumbers ? 1 : 0);
   const [filterBy, setFilterBy] = useState15(globalFilters ?? []);
   const [sortBy, setSortBy] = useState15([...globalSorts ?? [], { columnName: "isNew", direction: "desc" }]);
   const tableContainerRef = useRef11(null);
-  const memoizedColumns = useMemo8(() => getColumns(columns), [columns]);
+  const rowNumberColumnId = useMemo8(() => showRowsNumbers ? `rowNumber_${uuidv46()}` : null, [showRowsNumbers]);
+  const memoizedColumns = useMemo8(() => {
+    if (!rowNumberColumnId) {
+      return getColumns(columns);
+    }
+    const buildRowsNumbersColumn = (template, isRoot = false) => ({
+      id: rowNumberColumnId,
+      ...isRoot ? { width: 50 } : void 0,
+      ...!template?.columns?.length ? { accessorKey: rowNumberColumnId } : void 0,
+      label: "#",
+      columns: template?.columns?.map((child) => buildRowsNumbersColumn(child, false))
+    });
+    const nextColumns = [buildRowsNumbersColumn(columns[0], true), ...columns];
+    const result = getColumns(nextColumns);
+    return result;
+  }, [columns, rowNumberColumnId]);
   const memoizedData = useMemo8(() => {
     const newRows = [...rows];
     const nextFilterBy = filterBy.filter((filterByItem) => {
@@ -3315,13 +3333,19 @@ function VirtualTable(props) {
       (fb) => fb.type === "numberRange" && fb.values.some((v) => v !== Infinity && v !== -Infinity) || fb.type === "dateRange" && fb.values.some((v) => !dayjs4(v).isSame(dayjs4(0)) && !dayjs4(v).isSame(dayjs4(Number.MAX_SAFE_INTEGER)))
     ) ? [] : newRows;
     const sorted = sortBy.length ? recursiveSort(filtered, sortBy) : filtered;
+    const result = rowNumberColumnId ? sorted.map((row, index) => ({
+      ...row,
+      [rowNumberColumnId]: {
+        value: index + 1
+      }
+    })) : sorted;
     window.dispatchEvent(
       new CustomEvent("filteringRows", {
-        detail: sorted
+        detail: result
       })
     );
-    return sorted;
-  }, [rows, sortBy, filterBy]);
+    return result;
+  }, [rows, sortBy, filterBy, rowNumberColumnId]);
   const columnsEstimateSize = useMemo8(
     () => cellWidth ?? ((index) => memoizedColumns[index]?.meta?.width ?? 200),
     [cellWidth, memoizedColumns]
@@ -3335,7 +3359,7 @@ function VirtualTable(props) {
     getCoreRowModel: getCoreRowModel(),
     initialState: {
       columnPinning: {
-        left: memoizedColumns.filter((_, index) => index < fixedColumnsCount).map((mc) => mc.id).filter((id) => id).map((id) => id) ?? []
+        left: memoizedColumns.filter((_, index) => index < fixedWithNumbersCount).map((mc) => mc.id).filter((id) => id).map((id) => id) ?? []
       }
     },
     meta: {
@@ -3357,7 +3381,7 @@ function VirtualTable(props) {
     horizontal: true,
     count: headerGroups[0]?.headers.length ?? 1,
     rangeExtractor: useCallback9((range) => {
-      const stickyIndexes = [...Array(fixedColumnsCount)].map((_, index) => index);
+      const stickyIndexes = [...Array(fixedWithNumbersCount)].map((_, index) => index);
       const next = /* @__PURE__ */ new Set([...stickyIndexes, ...defaultRangeExtractor(range)]);
       return [...next].sort((a, b) => a - b);
     }, []),
@@ -3366,8 +3390,8 @@ function VirtualTable(props) {
     overscan: 5
   });
   const fixedColumnsWidth = useMemo8(
-    () => [...Array(fixedColumnsCount)].reduce((sum, _, index) => sum + columnsEstimateSize(index), 0),
-    [fixedColumnsCount, columnsEstimateSize]
+    () => [...Array(fixedWithNumbersCount)].reduce((sum, _, index) => sum + columnsEstimateSize(index), 0),
+    [fixedWithNumbersCount, columnsEstimateSize]
   );
   const headerGroupHeight = useMemo8(() => {
     const delta = headerGroups.length - headerRowHeight.length;
@@ -3437,7 +3461,7 @@ function VirtualTable(props) {
   const virtualColumns = columnVirtualizer.getVirtualItems();
   const lastVirtualColumnIndex = virtualColumns[virtualColumns.length - 1]?.index;
   const [before, after] = virtualColumns.length > 0 ? [
-    fixedColumnsCount && virtualColumns[fixedColumnsCount].index !== fixedColumnsCount ? virtualColumns[fixedColumnsCount].start - fixedColumnsWidth : virtualColumns[0].start,
+    fixedWithNumbersCount && virtualColumns[fixedWithNumbersCount].index !== fixedWithNumbersCount ? virtualColumns[fixedWithNumbersCount].start - fixedColumnsWidth : virtualColumns[0].start,
     columnsTotalSize - virtualColumns[virtualColumns.length - 1].end
   ] : [0, 0];
   useEffect8(() => {
@@ -3517,7 +3541,7 @@ function VirtualTable(props) {
                       ) });
                     };
                     return /* @__PURE__ */ jsxs19(Fragment8, { children: [
-                      [...Array(fixedColumnsCount)].map((_, index) => {
+                      [...Array(fixedWithNumbersCount)].map((_, index) => {
                         const header2 = headerGroup.headers[index];
                         const nextHorizontalHeaders = getNextHorizontalHeaders(
                           headerGroup.headers,
@@ -3548,7 +3572,7 @@ function VirtualTable(props) {
                         );
                       }),
                       virtualColumns.map((column) => {
-                        if (column.index > fixedColumnsCount - 1) {
+                        if (column.index > fixedWithNumbersCount - 1) {
                           const header2 = headerGroup.headers[column.index];
                           const nextHorizontalHeaders = getNextHorizontalHeaders(
                             headerGroup.headers,
@@ -3585,7 +3609,7 @@ function VirtualTable(props) {
                                 width: `${thWidth}px`,
                                 zIndex,
                                 height: `${thHeight}px`,
-                                transform: `translateX(${column.start + (!!fixedColumnsCount ? -2 : 0)}px) translateY(${translateY}px)`,
+                                transform: `translateX(${column.start + (!!fixedWithNumbersCount ? -2 : 0)}px) translateY(${translateY}px)`,
                                 borderTop: borders !== "none" && translateY === 0 ? "1px solid var(--border-color)" : void 0
                               },
                               children: innerCell(header2)
@@ -3602,7 +3626,7 @@ function VirtualTable(props) {
                           style: {
                             width: `${rowActionWidth}px`,
                             height: `${headerGroupHeight[hgi]}px`,
-                            transform: `translateX(${columnsTotalSize + (!!fixedColumnsCount ? -2 : 0)}px) translateY(${headerGroupY(hgi)}px)`
+                            transform: `translateX(${columnsTotalSize + (!!fixedWithNumbersCount ? -2 : 0)}px) translateY(${headerGroupY(hgi)}px)`
                           }
                         }
                       )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.59",
+  "version": "0.0.61",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",