@databiosphere/findable-ui 15.0.2 → 16.0.0

package/lib/config/entities.d.ts

@@ -1,5 +1,5 @@
 import { TabProps as MTabProps, Theme, ThemeOptions } from "@mui/material";
-import { CellContext, ColumnSort, RowData, Table } from "@tanstack/react-table";
+import { CellContext, ColumnMeta, ColumnSort, RowData, Table, TableOptions } from "@tanstack/react-table";
 import { JSXElementConstructor, ReactNode } from "react";
 import { SelectCategoryValueView, SelectedFilter } from "../common/entities";
 import { HeroTitle } from "../components/common/Title/title";
@@ -79,6 +79,7 @@ export interface ColumnConfig<T = any, C extends keyof JSX.IntrinsicElements | J
     disableSorting?: boolean;
     header: string;
     id: string;
+    meta?: ColumnMeta<T, unknown>;
     tooltip?: string;
     width: GridTrackSize;
 }
@@ -130,7 +131,7 @@ export interface EntityConfig<T = any, I = any> extends TabConfig {
     explorerTitle?: SiteConfig["explorerTitle"];
     getId?: GetIdFunction<T>;
     getTitle?: GetTitleFunction<T>;
-    list: ListConfig;
+    list: ListConfig<T>;
     listView?: ListViewConfig;
     options?: Options;
     overrides?: Override[];
@@ -200,9 +201,10 @@ export type GridTrackSize = GridTrackAuto | GridTrackLength | GridTrackFlex | Gr
 /**
  * List configuration.
  */
-export interface ListConfig<T = any> {
+export interface ListConfig<T extends RowData> {
     columns: ColumnConfig<T>[];
     defaultSort?: ColumnSort;
+    tableOptions?: Omit<TableOptions<T>, "columns" | "data" | "getCoreRowModel">;
 }
 /**
  * List view configuration.

package/lib/providers/exploreState/initializer/utils.js

@@ -95,10 +95,12 @@ function initCategoryGroups(entityStateByCategoryGroupConfigKey, categoryGroupCo
  * @returns column visibility.
  */
 function initColumnVisibility(entityConfig) {
-    const { list: { columns }, listView: { enableRowSelection = false } = {}, } = entityConfig;
+    const { 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.
     };
 }
 /**

package/lib/styles/common/mui/link.d.ts

@@ -0,0 +1,7 @@
+import { LinkProps } from "@mui/material";
+type LinkPropsOptions = {
+    UNDERLINE: typeof UNDERLINE;
+};
+export declare const UNDERLINE: Record<string, LinkProps["underline"]>;
+export declare const LINK_PROPS: LinkPropsOptions;
+export {};

package/lib/styles/common/mui/link.js

@@ -0,0 +1,8 @@
+export const UNDERLINE = {
+    ALWAYS: "always",
+    HOVER: "hover",
+    NONE: "none",
+};
+export const LINK_PROPS = {
+    UNDERLINE,
+};

package/lib/styles/common/mui/tableCell.d.ts

@@ -0,0 +1,13 @@
+import { TableCellProps } from "@mui/material";
+type TableCellPropsOptions = {
+    ALIGN: typeof ALIGN;
+    PADDING: typeof PADDING;
+    SIZE: typeof SIZE;
+    VARIANT: typeof VARIANT;
+};
+declare const ALIGN: Record<string, TableCellProps["align"]>;
+declare const PADDING: Record<string, TableCellProps["padding"]>;
+declare const SIZE: Record<string, TableCellProps["size"]>;
+declare const VARIANT: Record<string, TableCellProps["variant"]>;
+export declare const TABLE_CELL_PROPS: TableCellPropsOptions;
+export {};

package/lib/styles/common/mui/tableCell.js

@@ -0,0 +1,27 @@
+const ALIGN = {
+    CENTER: "center",
+    INHERIT: "inherit",
+    JUSTIFY: "justify",
+    LEFT: "left",
+    RIGHT: "right",
+};
+const PADDING = {
+    CHECKBOX: "checkbox",
+    NONE: "none",
+    NORMAL: "normal",
+};
+const SIZE = {
+    MEDIUM: "medium",
+    SMALL: "small",
+};
+const VARIANT = {
+    BODY: "body",
+    FOOTER: "footer",
+    HEAD: "head",
+};
+export const TABLE_CELL_PROPS = {
+    ALIGN,
+    PADDING,
+    SIZE,
+    VARIANT,
+};

package/lib/styles/common/mui/typography.d.ts

@@ -0,0 +1,2 @@
+import { TypographyOwnProps } from "@mui/material";
+export declare const VARIANT: Record<string, TypographyOwnProps["variant"]>;

package/lib/styles/common/mui/typography.js

@@ -0,0 +1,3 @@
+export const VARIANT = {
+    INHERIT: "inherit",
+};

package/lib/theme/common/components.d.ts

@@ -195,12 +195,6 @@ export declare const MuiSvgIcon: (theme: Theme) => Components["MuiSvgIcon"];
  * @returns MuiTab component theme styles.
  */
 export declare const MuiTab: (theme: Theme) => Components["MuiTab"];
-/**
- * MuiTableCell Component
- * @param theme - Theme.
- * @returns MuiTableCell component theme styles.
- */
-export declare const MuiTableCell: (theme: Theme) => Components["MuiTableCell"];
 /**
  * MuiTableSortLabel Component
  */

package/lib/theme/common/components.js

@@ -1233,37 +1233,6 @@ export const MuiTab = (theme) => {
         },
     };
 };
-/**
- * MuiTableCell Component
- * @param theme - Theme.
- * @returns MuiTableCell component theme styles.
- */
-export const MuiTableCell = (theme) => {
-    return {
-        styleOverrides: {
-            body: {
-                ...theme.typography[TEXT_BODY_400],
-            },
-            head: {
-                ...theme.typography[TEXT_BODY_SMALL_500],
-                padding: "20px",
-            },
-            paddingCheckbox: {
-                paddingRight: 0,
-                width: "unset",
-            },
-            root: {
-                padding: "18px 20px",
-            },
-            sizeSmall: {
-                padding: "14px 20px",
-            },
-            stickyHeader: {
-                boxShadow: `0 1px 0 ${theme.palette.smoke.main}`,
-            },
-        },
-    };
-};
 /**
  * MuiTableSortLabel Component
  */

package/lib/theme/components/index.d.ts

@@ -1,2 +1,3 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiTableCell } from "./muiTableCell";

package/lib/theme/components/index.js

@@ -1,2 +1,3 @@
 export { MuiAlert } from "./muiAlert";
 export { MuiAlertTitle } from "./muiAlertTitle";
+export { MuiTableCell } from "./muiTableCell";

package/lib/theme/components/muiTableCell.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from "@mui/material";
+export declare const MuiTableCell: (theme: Theme) => Components["MuiTableCell"];

package/lib/theme/components/muiTableCell.js

@@ -0,0 +1,48 @@
+import { TABLE_CELL_PROPS } from "../../styles/common/mui/tableCell";
+import { TEXT_BODY_400, TEXT_BODY_SMALL_500 } from "../common/typography";
+export const MuiTableCell = (theme) => {
+    const paletteSmoke = theme.palette.smoke;
+    const typography = theme.typography;
+    return {
+        defaultProps: {},
+        styleOverrides: {
+            root: {
+                minHeight: 56,
+                stickyHeader: {
+                    boxShadow: `0 1px 0 ${paletteSmoke.main}`,
+                },
+                variants: [
+                    {
+                        props: { size: TABLE_CELL_PROPS.SIZE.MEDIUM },
+                        style: { padding: "10px 16px" },
+                    },
+                    {
+                        props: { size: TABLE_CELL_PROPS.SIZE.SMALL },
+                        style: { padding: "8px 16px" },
+                    },
+                    {
+                        props: { padding: TABLE_CELL_PROPS.PADDING.CHECKBOX },
+                        style: { paddingRight: 0, width: "unset" },
+                    },
+                    {
+                        props: { padding: TABLE_CELL_PROPS.PADDING.NONE },
+                        style: { padding: 0 },
+                    },
+                    {
+                        props: { variant: TABLE_CELL_PROPS.VARIANT.BODY },
+                        style: {
+                            ...typography[TEXT_BODY_400],
+                        },
+                    },
+                    {
+                        props: { variant: TABLE_CELL_PROPS.VARIANT.HEAD },
+                        style: {
+                            ...typography[TEXT_BODY_SMALL_500],
+                            backgroundColor: paletteSmoke.lightest,
+                        },
+                    },
+                ],
+            },
+        },
+    };
+};

package/lib/theme/theme.js

@@ -95,7 +95,7 @@ export function createAppTheme(customOptions) {
         MuiSelect: C.MuiSelect,
         MuiSvgIcon: C.MuiSvgIcon(theme),
         MuiTab: C.MuiTab(theme),
-        MuiTableCell: C.MuiTableCell(theme),
+        MuiTableCell: M.MuiTableCell(theme),
         MuiTableSortLabel: C.MuiTableSortLabel,
         MuiTabs: C.MuiTabs(theme),
         MuiToggleButton: C.MuiToggleButton(theme),

package/lib/views/ContentView/contentView.d.ts

@@ -1,9 +1,10 @@
 import { ReactNode } from "react";
 import { LayoutStyle } from "../../components/Layout/components/ContentLayout/common/entities";
+import { BaseComponentProps } from "../../components/types";
 export interface ContentViewProps {
     content: ReactNode;
     layoutStyle?: LayoutStyle;
     navigation?: ReactNode;
     outline?: ReactNode;
 }
-export declare const ContentView: ({ content, layoutStyle, navigation, outline, }: ContentViewProps) => JSX.Element;
+export declare const ContentView: ({ className, content, layoutStyle, navigation, outline, }: BaseComponentProps & ContentViewProps) => JSX.Element;

package/lib/views/ContentView/contentView.js

@@ -1,5 +1,5 @@
 import React from "react";
 import { ContentLayout } from "../../components/Layout/components/ContentLayout/contentLayout";
-export const ContentView = ({ content, layoutStyle, navigation, outline, }) => {
-    return (React.createElement(ContentLayout, { content: content, layoutStyle: layoutStyle, navigation: navigation, outline: outline }));
+export const ContentView = ({ className, content, layoutStyle, navigation, outline, }) => {
+    return (React.createElement(ContentLayout, { className: className, content: content, layoutStyle: layoutStyle, navigation: navigation, outline: outline }));
 };

package/lib/views/ExploreView/exploreView.js

@@ -152,7 +152,7 @@ function renderComponent(componentsConfig, response) {
 function renderList(exploreState, entityConfig, entityListType) {
     const { listItems, loading, tabValue } = exploreState;
     const { getId: getRowId, list, listView } = entityConfig;
-    const { columns: columnsConfig, defaultSort } = list;
+    const { columns: columnsConfig, defaultSort, tableOptions } = list;
     if (!exploreState || !tabValue) {
         return React.createElement(React.Fragment, null); //TODO: return the loading UI component
     }
@@ -161,7 +161,7 @@ function renderList(exploreState, entityConfig, entityListType) {
         // loads with the previous tabs data on the first render after switching tabs. (or similar)
         return React.createElement(React.Fragment, null);
     }
-    return (React.createElement(TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading }));
+    return (React.createElement(TableCreator, { columns: columnsConfig, defaultSort: defaultSort, getRowId: getRowId, items: listItems ?? [], listView: listView, loading: loading, tableOptions: tableOptions }));
 }
 /**
  * Renders Summaries component when all the following requirements are fulfilled:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@databiosphere/findable-ui",
-  "version": "15.0.2",
+  "version": "16.0.0",
   "description": "",
   "scripts": {
     "test": "node --experimental-vm-modules node_modules/jest/bin/jest.js",

package/src/components/Detail/components/Table/components/TableRows/tableRows.tsx

@@ -1,7 +1,10 @@
-import { TableCell as MTableCell } from "@mui/material";
+import { TableCell } from "@mui/material";
 import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
-import { getTableCellPadding } from "../../../../../Table/components/TableCell/common/utils";
+import {
+  getTableCellAlign,
+  getTableCellPadding,
+} from "../../../../../Table/components/TableCell/common/utils";
 import { TableRow } from "../../../../../Table/components/TableRow/tableRow.styles";
 import { TableView } from "../../table";
 
@@ -31,13 +34,14 @@ export const TableRows = <T extends RowData>({
               if (cell.getIsAggregated()) return null; // Display of aggregated cells is currently not supported.
               if (cell.getIsPlaceholder()) return null; // Display of placeholder cells is currently not supported.
               return (
-                <MTableCell
+                <TableCell
                   key={cell.id}
+                  align={getTableCellAlign(cell.column)}
                   padding={getTableCellPadding(cell.column.id)}
                   size={tableCellSize}
                 >
                   {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                </MTableCell>
+                </TableCell>
               );
             })}
           </TableRow>

package/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(),

package/src/components/Export/components/ExportForm/exportForm.styles.ts

@@ -2,11 +2,7 @@ import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import { FormControl as MFormControl } from "@mui/material";
 import { mediaTabletUp } from "../../../../styles/common/mixins/breakpoints";
-import {
-  inkMain,
-  smokeLightest,
-  smokeMain,
-} from "../../../../styles/common/mixins/colors";
+import { inkMain, smokeMain } from "../../../../styles/common/mixins/colors";
 import { textBodyLarge500 } from "../../../../styles/common/mixins/fonts";
 import { ThemeProps } from "../../../../theme/theme";
 import {
@@ -75,8 +71,6 @@ export const TableFormControl = styled(FormControl)`
 
     .MuiTable-root {
       th {
-        background-color: ${smokeLightest};
-
         .MuiFormControlLabel-label {
           font: inherit;
         }

package/src/components/Layout/components/ContentLayout/contentLayout.styles.ts

@@ -30,6 +30,7 @@ const COLOR: Record<
 };
 
 interface LayoutProps {
+  hasNavigation?: boolean;
   panelColor?: PanelBackgroundColor;
 }
 
@@ -49,10 +50,18 @@ export const ContentLayout = styled.div<LayoutProps>`
   margin: 0 auto;
 
   ${mediaDesktopSmallUp} {
-    grid-template-areas: "navigation content";
-    grid-template-columns:
-      ${NAV_GRID_WIDTH}px
-      1fr;
+    ${({ hasNavigation }) =>
+      hasNavigation
+        ? css`
+            grid-template-areas: "navigation content";
+            grid-template-columns:
+              ${NAV_GRID_WIDTH}px
+              1fr;
+          `
+        : css`
+            grid-template-areas: "content";
+            grid-template-columns: 1fr;
+          `};
   }
 
   ${media1366Up} {

package/src/components/Layout/components/ContentLayout/contentLayout.tsx

@@ -1,6 +1,7 @@
 import { useRouter } from "next/router";
 import React, { ReactNode } from "react";
 import { useLayoutState } from "../../../../hooks/useLayoutState";
+import { BaseComponentProps } from "../../../types";
 import { LayoutStyle } from "./common/entities";
 import {
   Content,
@@ -14,7 +15,6 @@ import {
 } from "./contentLayout.styles";
 
 export interface ContentLayoutProps {
-  className?: string;
   content: ReactNode;
   layoutStyle?: LayoutStyle;
   navigation?: ReactNode;
@@ -27,13 +27,17 @@ export const ContentLayout = ({
   layoutStyle,
   navigation,
   outline,
-}: ContentLayoutProps): JSX.Element => {
+}: BaseComponentProps & ContentLayoutProps): JSX.Element => {
   const { asPath } = useRouter();
   const {
     layoutState: { headerHeight },
   } = useLayoutState();
   return (
-    <Layout className={className} panelColor={layoutStyle?.content}>
+    <Layout
+      className={className}
+      hasNavigation={Boolean(navigation)}
+      panelColor={layoutStyle?.content}
+    >
       {navigation && (
         <NavigationGrid
           headerHeight={headerHeight}

package/src/components/Table/common/columnDef.ts

@@ -0,0 +1,19 @@
+import { ColumnDef, RowData } from "@tanstack/react-table";
+import { TABLE_CELL_PROPS } from "../../../styles/common/mui/tableCell";
+import { ACCESSOR_KEYS } from "../../TableCreator/common/constants";
+import { RowPositionCell } from "../components/TableCell/components/RowPositionCell/rowPositionCell";
+
+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: "",
+      width: "max-content",
+    },
+  },
+};

package/src/components/Table/common/gridTable.styles.ts

@@ -24,8 +24,7 @@ export const GridTable = styled(MTable, {
     background-color: ${white};
   }
 
-  td,
-  th {
+  td {
     background-color: inherit;
   }
 

package/src/components/Table/components/TableCell/common/utils.ts

@@ -1,7 +1,19 @@
-import { TableCellProps as MTableCellProps } from "@mui/material";
-import { CoreCell, CoreHeader, RowData } from "@tanstack/react-table";
+import { TableCellProps } from "@mui/material";
+import { Column, CoreCell, CoreHeader, RowData } from "@tanstack/react-table";
+import { TABLE_CELL_PROPS } from "../../../../../styles/common/mui/tableCell";
 import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
 
+/**
+ * Returns table cell alignment based on the cell.
+ * @param column - Column.
+ * @returns table cell alignment.
+ */
+export function getTableCellAlign<T extends RowData, TValue>(
+  column: Column<T, TValue>
+): TableCellProps["align"] {
+  return column.columnDef.meta?.align;
+}
+
 /**
  * Returns table cell padding based on the cell ID.
  * @param id - Cell ID.
@@ -9,8 +21,13 @@ import { ACCESSOR_KEYS } from "../../../../TableCreator/common/constants";
  */
 export function getTableCellPadding<T extends RowData, TValue>(
   id: CoreHeader<T, TValue>["id"] | CoreCell<T, TValue>["id"]
-): MTableCellProps["padding"] {
-  if (id === ACCESSOR_KEYS.SELECT) {
-    return "checkbox";
+): TableCellProps["padding"] {
+  switch (id) {
+    case ACCESSOR_KEYS.ROW_POSITION:
+      return TABLE_CELL_PROPS.PADDING.NORMAL;
+    case ACCESSOR_KEYS.SELECT:
+      return TABLE_CELL_PROPS.PADDING.CHECKBOX;
+    default:
+      return TABLE_CELL_PROPS.PADDING.NORMAL;
   }
 }

package/src/components/Table/components/TableCell/components/RowPositionCell/constants.ts

@@ -0,0 +1,7 @@
+import { TypographyOwnProps } from "@mui/material";
+import { VARIANT } from "../../../../../../styles/common/mui/typography";
+
+export const TYPOGRAPHY_PROPS: Partial<TypographyOwnProps> = {
+  sx: { marginRight: -2, paddingLeft: 2 },
+  variant: VARIANT.INHERIT,
+};

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

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

package/src/components/Table/components/TableHead/tableHead.tsx

@@ -1,14 +1,17 @@
 import {
-  TableCell as MTableCell,
   TableHead as MTableHead,
   TableRow as MTableRow,
+  TableCell,
   TableSortLabel,
 } from "@mui/material";
 import { flexRender, RowData, Table } from "@tanstack/react-table";
 import React, { Fragment } from "react";
 import { ROW_DIRECTION } from "../../common/entities";
 import { getTableSortLabelProps } from "../../common/utils";
-import { getTableCellPadding } from "../TableCell/common/utils";
+import {
+  getTableCellAlign,
+  getTableCellPadding,
+} from "../TableCell/common/utils";
 
 export interface TableHeadProps<T extends RowData> {
   rowDirection: ROW_DIRECTION;
@@ -34,8 +37,9 @@ export const TableHead = <T extends RowData>({
                   },
                 } = header;
                 return header.column.getIsGrouped() ? null : (
-                  <MTableCell
+                  <TableCell
                     key={header.id}
+                    align={getTableCellAlign(header.column)}
                     padding={getTableCellPadding(header.id)}
                   >
                     {header.column.getCanSort() && enableSortingInteraction ? (
@@ -53,7 +57,7 @@ export const TableHead = <T extends RowData>({
                         header.getContext()
                       )
                     )}
-                  </MTableCell>
+                  </TableCell>
                 );
               })}
             </MTableRow>

package/src/components/Table/components/TableRows/tableRows.tsx

@@ -1,8 +1,11 @@
-import { TableCell as MTableCell } from "@mui/material";
+import { TableCell } from "@mui/material";
 import { flexRender, Row, RowData, Table } from "@tanstack/react-table";
 import { Virtualizer } from "@tanstack/react-virtual";
 import React, { Fragment } from "react";
-import { getTableCellPadding } from "../TableCell/common/utils";
+import {
+  getTableCellAlign,
+  getTableCellPadding,
+} from "../TableCell/common/utils";
 import { TableRow } from "../TableRow/tableRow.styles";
 
 export interface TableRowsProps<T extends RowData> {
@@ -30,12 +33,13 @@ export const TableRows = <T extends RowData>({
             ref={virtualizer.measureElement}
           >
             {row.getVisibleCells().map((cell) => (
-              <MTableCell
+              <TableCell
                 key={cell.id}
+                align={getTableCellAlign(cell.column)}
                 padding={getTableCellPadding(cell.column.id)}
               >
                 {flexRender(cell.column.columnDef.cell, cell.getContext())}
-              </MTableCell>
+              </TableCell>
             ))}
           </TableRow>
         );

package/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);
+  },
+};

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

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