feat!: option to add row count on tables (#284)

src/components/Detail/components/Table/table.tsx

@@ -17,8 +17,10 @@ import {
   useBreakpointHelper,
 } from "../../../../hooks/useBreakpointHelper";
 import { TABLET } from "../../../../theme/common/breakpoints";
+import { COLUMN_DEF } from "../../../Table/common/columnDef";
 import { ROW_DIRECTION } from "../../../Table/common/entities";
 import { TableHead } from "../../../Table/components/TableHead/tableHead";
+import { ROW_POSITION } from "../../../Table/features/RowPosition/constants";
 import { ROW_PREVIEW } from "../../../Table/features/RowPreview/constants";
 import { GridTable } from "../../../Table/table.styles";
 import { generateColumnDefinitions } from "./common/utils";
@@ -56,8 +58,11 @@ export const Table = <T extends RowData>({
   const { stickyHeader = false } = table || {};
   const { sx: tableContainerSx } = tableContainer || {};
   const tableInstance = useReactTable({
-    _features: [ROW_PREVIEW],
-    columns: generateColumnDefinitions(columns),
+    _features: [ROW_POSITION, ROW_PREVIEW],
+    columns: generateColumnDefinitions([
+      COLUMN_DEF.ROW_POSITION as ColumnDef<T>,
+      ...columns,
+    ]),
     data: items,
     enableSorting: false,
     getCoreRowModel: getCoreRowModel(),

src/components/Table/common/columnDef.ts

@@ -6,8 +6,14 @@ import { RowPositionCell } from "../components/TableCell/components/RowPositionC
 export const COLUMN_DEF: Record<string, ColumnDef<RowData>> = {
   ROW_POSITION: {
     cell: RowPositionCell,
+    enableHiding: false,
+    enableSorting: false,
     header: "",
     id: ACCESSOR_KEYS.ROW_POSITION,
-    meta: { align: TABLE_CELL_PROPS.ALIGN.RIGHT, header: "" },
+    meta: {
+      align: TABLE_CELL_PROPS.ALIGN.RIGHT,
+      header: "",
+      width: "max-content",
+    },
   },
 };

src/components/Table/components/TableCell/components/RowPositionCell/rowPositionCell.tsx

@@ -3,15 +3,14 @@ import { CellContext, RowData } from "@tanstack/react-table";
 import React from "react";
 import { BaseComponentProps } from "../../../../../types";
 import { TYPOGRAPHY_PROPS } from "./constants";
-import { getRowPosition } from "./utils";
 
 export const RowPositionCell = <TData extends RowData, TValue>({
   className,
   ...cellContext
 }: BaseComponentProps & CellContext<TData, TValue>): JSX.Element => {
   return (
     <Typography {...TYPOGRAPHY_PROPS} className={className} component="div">
-      {getRowPosition(cellContext)}
+      {cellContext.row.getRowPosition()}
     </Typography>
   );
 };

src/components/Table/features/RowPosition/constants.ts

@@ -0,0 +1,34 @@
+import {
+  Cell,
+  Column,
+  Row,
+  RowData,
+  RowModel,
+  Table,
+  TableFeature,
+  TableState,
+} from "@tanstack/react-table";
+import { InitialTableState } from "@tanstack/table-core/src/types";
+import { getRowModel, getRowPosition, initInitialState } from "./utils";
+
+export const ROW_POSITION: TableFeature = {
+  createCell: <T extends RowData, TValue>(
+    cell: Cell<T, TValue>,
+    column: Column<T>,
+    row: Row<T>,
+    table: Table<T>
+  ): void => {
+    row.getRowPosition = (): number => {
+      return getRowPosition(row.id, table);
+    };
+  },
+  createTable: <T extends RowData>(table: Table<T>): void => {
+    const originalGetRowModel = table.getRowModel.bind(table);
+    table.getRowModel = (): RowModel<T> => {
+      return getRowModel(table, originalGetRowModel);
+    };
+  },
+  getInitialState: (initialState?: InitialTableState): Partial<TableState> => {
+    return initInitialState(initialState);
+  },
+};

src/components/Table/features/RowPosition/types.ts

@@ -0,0 +1,3 @@
+export interface RowPositionRow {
+  getRowPosition: () => number;
+}

src/components/Table/features/RowPosition/utils.ts

@@ -0,0 +1,80 @@
+import {
+  InitialTableState,
+  RowData,
+  RowModel,
+  Table,
+  TableState,
+} from "@tanstack/react-table";
+import { ACCESSOR_KEYS } from "../../../TableCreator/common/constants";
+import { DEFAULT_PAGINATION } from "../constants";
+
+/**
+ * Returns row model, with getter for row position.
+ * @param table - Table.
+ * @param getRowModel - Table getRowModel function.
+ * @returns row model.
+ */
+export function getRowModel<T extends RowData>(
+  table: Table<T>,
+  getRowModel: Table<T>[`getRowModel`]
+): RowModel<T> {
+  const rowModel = getRowModel();
+  rowModel.rows.forEach(({ id }, i) => {
+    rowModel.rowsById[id].getRowPosition = (): number =>
+      calculateRowPosition(table, i);
+  });
+  return rowModel;
+}
+
+/**
+ * Returns the position of the row in the table.
+ * @param rowId - Row ID.
+ * @param table - Table.
+ * @returns row position.
+ */
+export function getRowPosition<T extends RowData>(
+  rowId: string,
+  table: Table<T>
+): number {
+  const { getRowModel } = table;
+  const { rowsById } = getRowModel();
+  return rowsById[rowId].getRowPosition();
+}
+
+/**
+ * Calculates the position of the row in the table.
+ * @param table - Table.
+ * @param index - Row index.
+ * @returns row position.
+ */
+function calculateRowPosition<T extends RowData>(
+  table: Table<T>,
+  index: number
+): number {
+  const { getState } = table;
+  const {
+    pagination: { pageIndex, pageSize },
+  } = getState();
+  return pageIndex * pageSize + (index + 1);
+}
+
+/**
+ * Returns the initial table state.
+ * @param initialState - Initial state.
+ * @returns initial state.
+ */
+export function initInitialState(
+  initialState?: InitialTableState
+): Partial<TableState> {
+  return {
+    ...initialState,
+    columnVisibility: {
+      [ACCESSOR_KEYS.ROW_POSITION]: false,
+      ...initialState?.columnVisibility,
+    },
+    pagination: {
+      ...DEFAULT_PAGINATION,
+      ...initialState?.pagination,
+    },
+  };
+}

src/components/Table/features/constants.ts

@@ -0,0 +1,10 @@
+import { PaginationState } from "@tanstack/react-table";
+
+/**
+ * Default TanStack pagination state.
+ * See https://tanstack.com/table/latest/docs/guide/custom-features#getinitialstate.
+ */
+export const DEFAULT_PAGINATION: PaginationState = {
+  pageIndex: 0,
+  pageSize: 10,
+};

src/components/Table/features/entities.ts

@@ -1,4 +1,5 @@
 import { RowData } from "@tanstack/react-table";
+import { RowPositionRow } from "./RowPosition/types";
 import {
   RowPreviewInstance,
   RowPreviewOptions,
@@ -9,5 +10,5 @@ import {
 export type CustomFeatureInitialTableState = Partial<RowPreviewTableState>;
 export type CustomFeatureInstance<T extends RowData> = RowPreviewInstance<T>;
 export type CustomFeatureOptions = RowPreviewOptions;
-export type CustomFeatureRow = RowPreviewRow;
+export type CustomFeatureRow = RowPositionRow & RowPreviewRow;
 export type CustomFeatureTableState = RowPreviewTableState;

src/components/Table/table.tsx

@@ -49,6 +49,7 @@ import { Pagination as DXPagination } from "./components/Pagination/pagination";
 import { TableBody } from "./components/TableBody/tableBody";
 import { TableHead } from "./components/TableHead/tableHead";
 import { TableToolbar } from "./components/TableToolbar/tableToolbar";
+import { ROW_POSITION } from "./features/RowPosition/constants";
 import { ROW_PREVIEW } from "./features/RowPreview/constants";
 import { RowPreviewState } from "./features/RowPreview/entities";
 import { GridTable } from "./table.styles";
@@ -174,7 +175,7 @@ TableProps<T>): JSX.Element => {
   const { initialState: _initialState, ...restTableOptions } =
     tableOptions ?? {};
   const tableInstance = useReactTable({
-    _features: [ROW_PREVIEW],
+    _features: [ROW_POSITION, ROW_PREVIEW],
     columns,
     data: items,
     enableColumnFilters: true, // client-side filtering.
@@ -193,7 +194,7 @@ TableProps<T>): JSX.Element => {
     getPaginationRowModel: getPaginationRowModel(),
     getRowId,
     getSortedRowModel: clientFiltering ? getSortedRowModel() : undefined,
-    initialState: { ...initialState, ..._initialState }, // Currently, `sorting` and `columnVisibility` are managed by the ExploreState.
+    initialState: { ...initialState, ..._initialState }, // `sorting` and `columnVisibility` are managed by the ExploreState.
     manualPagination: true,
     manualSorting: !clientFiltering,
     onColumnVisibilityChange,

src/components/TableCreator/common/constants.ts

@@ -15,7 +15,7 @@ export const COLUMN_CONFIGS: Record<
 > = {
   ROW_POSITION: {
     columnPinned: false,
-    columnVisible: true,
+    columnVisible: false,
     componentConfig: {
       component: RowPositionCell,
       viewBuilder: (_, viewContext) => viewContext?.cellContext,

src/components/TableCreator/tableCreator.tsx

@@ -15,6 +15,7 @@ import {
 import { PAPER_PANEL_STYLE } from "../common/Paper/paper";
 import { ComponentCreator } from "../ComponentCreator/ComponentCreator";
 import { Loading } from "../Loading/loading";
+import { COLUMN_DEF } from "../Table/common/columnDef";
 import {
   arrIncludesSome,
   getInitialState,
@@ -82,6 +83,8 @@ export const TableCreator = <T extends RowData>({
           return acc;
         },
         [
+          /* Initialize column definitions with the "row position" column */
+          COLUMN_DEF.ROW_POSITION,
           /* Initialize column definitions with the "select" column */
           {
             ...buildBaseColumnDef(COLUMN_CONFIGS.SELECT),

src/providers/exploreState/initializer/utils.ts

@@ -143,12 +143,17 @@ function initCategoryGroups(
  */
 function initColumnVisibility(entityConfig: EntityConfig): VisibilityState {
   const {
-    list: { columns },
+    list: {
+      columns,
+      tableOptions: { initialState: { columnVisibility = {} } = {} } = {},
+    },
     listView: { enableRowSelection = false } = {},
   } = entityConfig;
   return {
+    [ACCESSOR_KEYS.ROW_POSITION]: false, // Explicitly setting row position to false; required - currently `columnVisibilty` is initialized from columns configuration.
     [ACCESSOR_KEYS.SELECT]: enableRowSelection,
     ...getInitialTableColumnVisibility(columns),
+    ...columnVisibility, // `columnVisibility` is managed by ExploreState; use table options to override this setting.
   };
 }