Feat add classnames cell

.github/workflows/build.yml

@@ -23,7 +23,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 500000
+        run: yarn install --immutable --network-timeout 500000
       - name: Run lint
         run: yarn lint
 
@@ -42,7 +42,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 500000
+        run: yarn install --immutable --network-timeout 500000
       - name: Run test
         run: yarn test
 
@@ -62,7 +62,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn install --frozen-lockfile --network-timeout 500000
+        run: yarn install --immutable --network-timeout 500000
       - name: Release packages
         env:
           CI: true
@@ -93,7 +93,7 @@ jobs:
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install dependencies
-        run: yarn install --frozen-lockfile
+        run: yarn install --immutable
       - name: Release packages
         env:
           CI: true

.gitignore

@@ -55,3 +55,13 @@ build
 .nyc_output
 /docs/.vuepress/dist/
 /packages/tailwind/COLORS.JSON
+
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+

.yarnrc.yml

@@ -0,0 +1,3 @@
+nodeLinker: node-modules
+enableGlobalCache: true
+yarnPath: .yarn/releases/yarn-4.1.1.cjs

lerna.json

@@ -1,15 +1,5 @@
 {
   "npmClient": "yarn",
-  "useWorkspaces": true,
-  "packages": [
-    "packages/*"
-  ],
-  "version": "2.2.3",
-  "command": {
-    "bootstrap": {
-      "npmClientArgs": [
-        "--no-package-lock"
-      ]
-    }
-  }
+  "packages": ["packages/*"],
+  "version": "2.2.3"
 }

package.json

@@ -21,7 +21,7 @@
     "lint": "lerna run lint --stream",
     "lint:fix": "lerna run lint:fix --stream",
     "prettier": "prettier '**/*.{ts,js,json,md,yml,yaml}' --write",
-    "build": "monorepo build",
+    "build": "monorepo build --verbose",
     "publish": "monorepo publish --dry-run",
     "start": "lerna run start --stream --parallel",
     "start:storybook": "lerna run start:storybook --stream",
@@ -35,18 +35,18 @@
     "@formio/choices.js": "^9.0.1",
     "@types/classnames": "^2.2.11",
     "@types/react": "^18.2.8",
+    "@types/react-dnd": "3.0.2",
+    "@types/react-dnd-html5-backend": "3.0.2",
     "@types/react-dom": "^18.2.4",
     "@types/react-redux": "^7.1.25",
     "@types/react-router": "^5.1.20",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.14",
-    "@types/react-dnd": "3.0.2",
-    "@types/react-dnd-html5-backend": "3.0.2",
     "connected-react-router": "6.9.1",
     "formiojs": "^4.14.13",
     "history": "5.3.0",
-    "lerna": "5.1.8",
-    "lodash": "4.17.20",
+    "lerna": "8.1.2",
+    "lodash": "4.17.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "7.2.6",
@@ -65,7 +65,7 @@
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.2.1",
-    "@tsed/monorepo-utils": "^1.22.6",
+    "@tsed/monorepo-utils": "2.1.2",
     "@types/ejs": "^3.0.5",
     "@types/jest": "27.0.2",
     "@types/lodash": "4.14.168",
@@ -126,5 +126,6 @@
         "cname": "formio.tsed.io"
       }
     ]
-  }
+  },
+  "packageManager": "yarn@4.1.1"
 }

packages/config/package.json

@@ -17,7 +17,5 @@
   "devDependencies": {
     "@tsed/tailwind": "2.2.3",
     "@tsed/yarn-workspaces": "1.19.3"
-  },
-  "dependencies": {},
-  "peerDependencies": {}
-}
+  }
+}

packages/react-formio-container/package.json

@@ -35,15 +35,12 @@
     "tooltip.js": "^1.3.3"
   },
   "devDependencies": {
-    "@tsed/react-formio": "2.2.3",
-    "@tsed/react-formio-stores": "2.2.3",
+    "@tsed/react-formio": "workspace:*",
+    "@tsed/react-formio-stores": "workspace:*",
     "@types/file-saver": "^2.0.1",
     "file-saver": "^2.0.5"
   },
   "peerDependenciesMeta": {
-    "formiojs": {
-      "optional": false
-    },
     "choices.js": {
       "optional": false
     },
@@ -56,6 +53,9 @@
     "file-saver": {
       "optional": false
     },
+    "formiojs": {
+      "optional": false
+    },
     "lodash": {
       "optional": false
     },
@@ -89,6 +89,5 @@
     "tooltip.js": {
       "optional": false
     }
-  },
-  "dependencies": {}
-}
+  }
+}

packages/react-formio-stores/package.json

@@ -15,8 +15,8 @@
     "watch": "microbundle watch --no-compress --format modern,cjs --jsx React.createElement --jsxFragment React.Fragment --globals react/jsx-runtime=jsx"
   },
   "dependencies": {
-    "@tsed/react-formio": "2.2.3",
-    "@tsed/redux-utils": "2.2.3",
+    "@tsed/react-formio": "workspace:*",
+    "@tsed/redux-utils": "workspace:*",
     "eventemitter2": "^6.4.3",
     "prop-types": "^15.7.2"
   },
@@ -31,7 +31,7 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "2.2.3",
-    "@tsed/tailwind-formio": "2.2.3"
+    "@tsed/tailwind": "workspace:*",
+    "@tsed/tailwind-formio": "workspace:*"
   }
-}
+}

packages/react-formio/package.json

@@ -32,7 +32,7 @@
     "tooltip.js": ">=1.3.3"
   },
   "devDependencies": {
-    "@tsed/tailwind": "2.2.3",
-    "@tsed/tailwind-formio": "2.2.3"
+    "@tsed/tailwind": "workspace:*",
+    "@tsed/tailwind-formio": "workspace:*"
   }
-}
+}

packages/react-formio/src/components/table/components/defaultCells.component.tsx

@@ -1,18 +1,27 @@
 import React from "react";
 import { Row } from "react-table";
 
+import type { ExtendedCell } from "../hooks/useCustomTable.hook";
+
 export function DefaultCells<Data extends object = {}>({ row }: { row: Row<Data> }) {
   return (
     <>
-      {row.cells.map((cell, i) => {
-        const { hidden, colspan } = cell.column as any;
+      {row.cells.map((cell: ExtendedCell<Data>, i) => {
+        const { hidden, colspan } = cell.column;
 
         if (hidden) {
           return null;
         }
 
         return (
-          <td colSpan={colspan} {...cell.getCellProps()} key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}>
+          <td
+            colSpan={colspan}
+            {...cell.getCellProps({
+              className: cell.column.className,
+              style: cell.column.style
+            })}
+            key={`tableInstance.page.cells.${cell.value || "value"}.${i}`}
+          >
             {cell.render("Cell") as any}
           </td>
         );

packages/react-formio/src/components/table/filters/selectColumnFilter.component.spec.tsx

@@ -45,4 +45,25 @@ describe("SelectColumnFilter", () => {
     expect(screen.queryByText("select-choice-1")).toBeNull();
     expect(screen.getByText("fake-choice")).toBeDefined();
   });
+
+  it("should display select with custom choices (function)", async () => {
+    const mockSetFilter = jest.fn();
+    const props = {
+      name: "data.id",
+      setFilter: mockSetFilter,
+      column: {
+        id: "id",
+        preFilteredRows: [{ values: { id: "select-choice-1" } }, { values: { id: "select-choice-2" } }],
+        choices: () => [{ label: "fake-choice", value: "fake-choice" }]
+      }
+    };
+
+    render(
+      // @ts-ignore
+      <SelectColumnFilter {...props} />
+    );
+
+    expect(screen.queryByText("select-choice-1")).toBeNull();
+    expect(screen.getByText("fake-choice")).toBeDefined();
+  });
 });

packages/react-formio/src/components/table/filters/selectColumnFilter.component.tsx

@@ -3,24 +3,50 @@ import { FilterProps } from "react-table";
 
 import { Select } from "../../select/select.component";
 
-export function SelectColumnFilter<D extends Record<string, unknown> = {}>({ column }: FilterProps<D>) {
-  const { id, preFilteredRows, filterValue, setFilter } = column;
+export function useSelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
+  const { column } = props;
+  const { id, preFilteredRows } = column;
   const { choices: customChoices } = column as any;
+  const { filterValue, setFilter } = column;
 
-  const choices =
-    customChoices ||
-    [...new Set(preFilteredRows.map((row) => row.values[id]))].filter((value) => value).map((value) => ({ label: value, value }));
+  const choices = (() => {
+    if (customChoices) {
+      if (typeof customChoices === "function") {
+        return customChoices(props);
+      }
+      return customChoices;
+    }
+
+    return [...new Set(preFilteredRows.map((row) => row.values[id]))]
+      .filter((value) => value)
+      .map((value) => ({
+        label: value,
+        value
+      }));
+  })();
+
+  const onChange = (_: string, value: any) => {
+    setFilter(value || undefined);
+  };
+
+  return {
+    value: filterValue,
+    onChange,
+    choices: [{ value: "", label: "All" }].concat(choices)
+  };
+}
+
+export function SelectColumnFilter<D extends Record<string, unknown> = {}>(props: FilterProps<D>) {
+  const { value, choices, onChange } = useSelectColumnFilter(props);
 
   return (
     <Select
-      key={`filter-${column.id}`}
-      name={`filter-${column.id}`}
+      key={`filter-${props.column.id}`}
+      name={`filter-${props.column.id}`}
       size={"sm"}
-      value={filterValue}
-      choices={[{ value: "", label: "All" }].concat(choices)}
-      onChange={(name, value) => {
-        setFilter(value || undefined);
-      }}
+      value={value}
+      choices={choices}
+      onChange={onChange}
     />
   );
 }

packages/react-formio/src/components/table/hooks/useCustomTable.hook.tsx

@@ -1,6 +1,18 @@
 import noop from "lodash/noop";
 import React, { PropsWithChildren, useEffect, useState } from "react";
-import { CellProps, FilterProps, Renderer, TableOptions, useFilters, useGroupBy, usePagination, useSortBy, useTable } from "react-table";
+import {
+  Cell,
+  CellProps,
+  Column,
+  FilterProps,
+  Renderer,
+  TableOptions,
+  useFilters,
+  useGroupBy,
+  usePagination,
+  useSortBy,
+  useTable
+} from "react-table";
 
 import { OnClickOperation, Operation, QueryOptions } from "../../../interfaces";
 import { Pagination as DefaultPagination } from "../../pagination/pagination.component";
@@ -11,7 +23,25 @@ import { DefaultColumnFilter } from "../filters/defaultColumnFilter.component";
 import { swapElements } from "../utils/swapElements";
 import { useOperations } from "./useOperations.hook";
 
+export interface ExtraColumnProps {
+  colspan?: number;
+  hidden?: boolean;
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export type ExtendedColumn<Data extends object = any> = Column<Data> & ExtraColumnProps;
+
+export type ExtendedCell<Data extends object = any> = Cell<Data, any> & {
+  column: ExtraColumnProps;
+};
+
 export interface TableProps<Data extends object = any> extends TableOptions<Data>, Partial<QueryOptions> {
+  /**
+   * extended columns interface
+   */
+  columns: ReadonlyArray<ExtendedColumn<Data>>;
+
   className?: string;
   /**
    * Call the listener when a filter / pagination  / sort change.

packages/react-formio/src/components/table/table.component.tsx

@@ -3,6 +3,7 @@ import React, { PropsWithChildren } from "react";
 
 import { DrapNDropContainer } from "./components/dragNDropContainer";
 import { TableProps, useCustomTable } from "./hooks/useCustomTable.hook";
+
 export function Table<Data extends object = any>(props: PropsWithChildren<TableProps<Data>>) {
   const {
     className,