feat: option to add row count on tables (#415) (#465)

---------

Co-authored-by: Fran McDade <[email protected]>

app/components/Detail/components/TrackerForm/components/Section/components/ComponentAtlas/components/LinkedSourceDatasets/components/Table/common/constants.ts

@@ -5,6 +5,7 @@ import {
   TableOptions,
 } from "@tanstack/react-table";
 import { HCAAtlasTrackerSourceDataset } from "../../../../../../../../../../../../../apis/catalog/hca-atlas-tracker/common/entities";
+import { COLUMN_VISIBILITY } from "../../../../../../../../../../../../Table/features/constants";
 
 const PUBLICATION_STRING = "publicationString";
 const TITLE = "title";
@@ -15,7 +16,7 @@ const SORTING: SortingState = [
 ];
 
 export const TABLE_GRID_TEMPLATE_COLUMNS =
-  "minmax(272px, 1fr) repeat(2, minmax(180px, 0.4fr)) repeat(5, minmax(88px, 128px)) auto";
+  "max-content minmax(272px, 1fr) repeat(2, minmax(180px, 0.4fr)) repeat(5, minmax(88px, 128px)) auto";
 
 export const TABLE_OPTIONS: Partial<
   TableOptions<HCAAtlasTrackerSourceDataset>
@@ -24,6 +25,7 @@ export const TABLE_OPTIONS: Partial<
   enableSorting: true,
   getSortedRowModel: getSortedRowModel(),
   initialState: {
+    columnVisibility: COLUMN_VISIBILITY.ROW_POSITION,
     sorting: SORTING,
   },
 };

app/components/Detail/components/ViewComponentAtlases/constants.ts

@@ -0,0 +1,10 @@
+import { ListConfig } from "@databiosphere/findable-ui/lib/config/entities";
+import { HCAAtlasTrackerComponentAtlas } from "../../../../apis/catalog/hca-atlas-tracker/common/entities";
+import { COLUMN_VISIBILITY } from "../../../Table/features/constants";
+
+export const TABLE_OPTIONS: ListConfig<HCAAtlasTrackerComponentAtlas>["tableOptions"] =
+  {
+    initialState: {
+      columnVisibility: COLUMN_VISIBILITY.ROW_POSITION,
+    },
+  };

app/components/Detail/components/ViewComponentAtlases/viewComponentAtlases.tsx

@@ -15,6 +15,7 @@ import { TablePlaceholder } from "../../../Table/components/TablePlaceholder/tab
 import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table } from "../../../Table/table.styles";
 import { RequestAccess } from "./components/RequestAccess/requestAccess";
+import { TABLE_OPTIONS } from "./constants";
 
 interface ViewComponentAtlasesProps {
   componentAtlases?: HCAAtlasTrackerComponentAtlas[];
@@ -48,8 +49,9 @@ export const ViewComponentAtlases = ({
         {componentAtlases.length > 0 && (
           <Table
             columns={getAtlasComponentAtlasesTableColumns(pathParameter)}
-            gridTemplateColumns="minmax(260px, 1fr) repeat(5, minmax(88px, 128px)) auto"
+            gridTemplateColumns="max-content minmax(260px, 1fr) repeat(5, minmax(88px, 128px)) auto"
             items={componentAtlases}
+            tableOptions={TABLE_OPTIONS}
           />
         )}
         <TablePlaceholder

app/components/Detail/components/ViewSourceDatasets/constants.ts

@@ -0,0 +1,10 @@
+import { ListConfig } from "@databiosphere/findable-ui/lib/config/entities";
+import { HCAAtlasTrackerSourceDataset } from "../../../../apis/catalog/hca-atlas-tracker/common/entities";
+import { COLUMN_VISIBILITY } from "../../../Table/features/constants";
+
+export const TABLE_OPTIONS: ListConfig<HCAAtlasTrackerSourceDataset>["tableOptions"] =
+  {
+    initialState: {
+      columnVisibility: COLUMN_VISIBILITY.ROW_POSITION,
+    },
+  };

app/components/Detail/components/ViewSourceDatasets/viewSourceDatasets.tsx

@@ -10,6 +10,7 @@ import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.sty
 import { Table } from "../../../Table/table.styles";
 import { AddSourceDataset } from "../AddSourceDataset/addSourceDataset";
 import { RequestAccess } from "./components/RequestAccess/requestAccess";
+import { TABLE_OPTIONS } from "./constants";
 
 interface ViewSourceDatasetsProps {
   formManager: FormManagerProps;
@@ -39,8 +40,9 @@ export const ViewSourceDatasets = ({
         {sourceDatasets.length > 0 && (
           <Table
             columns={getAtlasSourceDatasetsTableColumns(pathParameter, canEdit)}
-            gridTemplateColumns="minmax(200px, 1fr) minmax(180px, auto) repeat(4, minmax(88px, 0.4fr)) auto"
+            gridTemplateColumns="max-content minmax(200px, 1fr) minmax(180px, auto) repeat(4, minmax(88px, 0.4fr)) auto"
             items={sourceDatasets.sort(sortSourceDataset)}
+            tableOptions={TABLE_OPTIONS}
           />
         )}
         <TablePlaceholder

app/components/Detail/components/ViewSourceStudies/constants.ts

@@ -0,0 +1,10 @@
+import { ListConfig } from "@databiosphere/findable-ui/lib/config/entities";
+import { HCAAtlasTrackerSourceStudy } from "../../../../apis/catalog/hca-atlas-tracker/common/entities";
+import { COLUMN_VISIBILITY } from "../../../Table/features/constants";
+
+export const TABLE_OPTIONS: ListConfig<HCAAtlasTrackerSourceStudy>["tableOptions"] =
+  {
+    initialState: {
+      columnVisibility: COLUMN_VISIBILITY.ROW_POSITION,
+    },
+  };

app/components/Detail/components/ViewSourceStudies/viewSourceStudies.tsx

@@ -18,6 +18,7 @@ import { TablePlaceholder } from "../../../Table/components/TablePlaceholder/tab
 import { Toolbar } from "../../../Table/components/TableToolbar/tableToolbar.styles";
 import { Table } from "../../../Table/table.styles";
 import { RequestAccess } from "./components/RequestAccess/requestAccess";
+import { TABLE_OPTIONS } from "./constants";
 
 interface ViewSourceStudiesProps {
   formManager: FormManager;
@@ -55,8 +56,9 @@ export const ViewSourceStudies = ({
         {sourceStudies.length > 0 && (
           <Table
             columns={getAtlasSourceStudiesTableColumns(pathParameter)}
-            gridTemplateColumns="minmax(260px, 1fr) minmax(152px, 0.5fr) minmax(80px, 130px) repeat(3, minmax(100px, 118px))"
+            gridTemplateColumns="max-content minmax(260px, 1fr) minmax(152px, 0.5fr) minmax(80px, 130px) repeat(3, minmax(100px, 118px))"
             items={sortedSourceStudies}
+            tableOptions={TABLE_OPTIONS}
           />
         )}
         <TablePlaceholder

app/components/Table/features/constants.ts

@@ -0,0 +1,6 @@
+import { ACCESSOR_KEYS } from "@databiosphere/findable-ui/lib/components/TableCreator/common/constants";
+import { VisibilityState } from "@tanstack/react-table";
+
+export const COLUMN_VISIBILITY: Record<string, VisibilityState> = {
+  ROW_POSITION: { [ACCESSOR_KEYS.ROW_POSITION]: true },
+};

package.json

@@ -16,7 +16,7 @@
     "migrate": "ts-node -O '{\"module\": \"commonjs\"}' ./scripts/migration-runner.ts -j ts"
   },
   "dependencies": {
-    "@databiosphere/findable-ui": "15.0.2",
+    "@databiosphere/findable-ui": "16.0.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@hookform/resolvers": "^3.3.4",

site-config/hca-atlas-tracker/local/index/atlasEntityConfig.ts

@@ -11,6 +11,7 @@ import {
   getAtlasId,
 } from "../../../../app/apis/catalog/hca-atlas-tracker/common/utils";
 import * as C from "../../../../app/components";
+import { COLUMN_VISIBILITY } from "../../../../app/components/Table/features/constants";
 import { mapSelectCategoryValue } from "../../../../app/config/utils";
 import { formatDateToQuarterYear } from "../../../../app/utils/date-fns";
 import * as V from "../../../../app/viewModelBuilders/catalog/hca-atlas-tracker/common/viewModelBuilders";
@@ -90,6 +91,7 @@ export const atlasEntityConfig: EntityConfig = {
   list: {
     columns: [
       {
+        columnPinned: true,
         componentConfig: {
           component: C.Link,
           viewBuilder: V.buildAtlasName,
@@ -194,6 +196,9 @@ export const atlasEntityConfig: EntityConfig = {
       desc: SORT_DIRECTION.ASCENDING,
       id: HCA_ATLAS_TRACKER_CATEGORY_KEY.NAME,
     },
+    tableOptions: {
+      initialState: { columnVisibility: COLUMN_VISIBILITY.ROW_POSITION },
+    },
   } as ListConfig<HCAAtlasTrackerListAtlas>,
   listView: {
     disablePagination: true,

site-config/hca-atlas-tracker/local/index/tasks/tasksEntityConfig.ts

@@ -16,6 +16,7 @@ import {
   taskInputMapper,
 } from "../../../../../app/apis/catalog/hca-atlas-tracker/common/utils";
 import * as C from "../../../../../app/components";
+import { COLUMN_VISIBILITY } from "../../../../../app/components/Table/features/constants";
 import { mapSelectCategoryValue } from "../../../../../app/config/utils";
 import { formatDateToQuarterYear } from "../../../../../app/utils/date-fns";
 import * as V from "../../../../../app/viewModelBuilders/catalog/hca-atlas-tracker/common/viewModelBuilders";
@@ -243,6 +244,9 @@ export const tasksEntityConfig: EntityConfig = {
       desc: SORT_DIRECTION.ASCENDING,
       id: HCA_ATLAS_TRACKER_CATEGORY_KEY.ATLAS_NAMES,
     },
+    tableOptions: {
+      initialState: { columnVisibility: COLUMN_VISIBILITY.ROW_POSITION },
+    },
   } as ListConfig<HCAAtlasTrackerListValidationRecord>,
   listView: {
     disablePagination: true,

site-config/hca-atlas-tracker/local/index/userEntityConfig.ts

@@ -8,6 +8,7 @@ import { EXPLORE_MODE } from "@databiosphere/findable-ui/lib/hooks/useExploreMod
 import { HCAAtlasTrackerUser } from "../../../../app/apis/catalog/hca-atlas-tracker/common/entities";
 import { getUserId } from "../../../../app/apis/catalog/hca-atlas-tracker/common/utils";
 import * as C from "../../../../app/components";
+import { COLUMN_VISIBILITY } from "../../../../app/components/Table/features/constants";
 import { mapSelectCategoryValue } from "../../../../app/config/utils";
 import * as V from "../../../../app/viewModelBuilders/catalog/hca-atlas-tracker/common/viewModelBuilders";
 import {
@@ -66,6 +67,7 @@ export const userEntityConfig: EntityConfig = {
   list: {
     columns: [
       {
+        columnPinned: true,
         componentConfig: {
           component: C.Link,
           viewBuilder: V.buildUserFullName,
@@ -124,6 +126,9 @@ export const userEntityConfig: EntityConfig = {
       desc: SORT_DIRECTION.ASCENDING,
       id: HCA_ATLAS_TRACKER_CATEGORY_KEY.FULL_NAME,
     },
+    tableOptions: {
+      initialState: { columnVisibility: COLUMN_VISIBILITY.ROW_POSITION },
+    },
   } as ListConfig<HCAAtlasTrackerUser>,
   listView: {
     disablePagination: true,