Adding IColumn properties supported by tubular to the main model.

jest.config.js

@@ -21,10 +21,4 @@ module.exports = {
     automock: false,
     setupFilesAfterEnv: ['./jest-setup.ts'],
     setupFiles: ['@testing-library/react/dont-cleanup-after-each'],
-    globals: {
-        'ts-jest': {
-            diagnostics: false,
-            tsconfig: 'tsconfig.json',
-        },
-    },
 };

sample/src/ColumnsDefinition.ts

@@ -4,15 +4,14 @@ import { ITbColumnProxy } from '../../src/interfaces/ITbColumn';
 export const columns: ITbColumnProxy[] = [
     {
         name: 'Actions',
-        minWidth: 50,
         isComputed: true,
         dataType: ColumnDataType.String,
     },
     {
         name: 'OrderID',
         label: 'Order ID',
-        minWidth: 100,
-        maxWidth: 110,
+        minWidth: 80,
+        maxWidth: 90,
         isKey: true,
         dataType: ColumnDataType.Numeric,
         sortable: true,
@@ -42,8 +41,8 @@ export const columns: ITbColumnProxy[] = [
     {
         name: 'Amount',
         label: 'Amount',
-        minWidth: 100,
-        maxWidth: 110,
+        minWidth: 70,
+        maxWidth: 90,
         dataType: ColumnDataType.Numeric,
         sortable: true,
     },

src/interfaces/ITbColumn.ts

@@ -5,4 +5,6 @@ export interface ITbColumn extends IColumn {
     tb?: Partial<ColumnModel>;
 }
 
-export interface ITbColumnProxy extends Partial<ColumnModel>, Pick<IColumn, 'minWidth' | 'maxWidth'> {}
+export type TbSupportedIColumnProps = Partial<Pick<IColumn, 'minWidth' | 'maxWidth'>>;
+
+export interface ITbColumnProxy extends Partial<ColumnModel>, TbSupportedIColumnProps {}

src/useTbFabric.ts

@@ -11,7 +11,7 @@
     columnHasFilter,
 } from 'tubular-common/dist/Models';
 import { IColumn } from '@fluentui/react';
-import { ITbColumnProxy } from './interfaces/ITbColumn';
+import { ITbColumnProxy, TbSupportedIColumnProps } from './interfaces/ITbColumn';
 import { ITbFabricInstance } from './interfaces/ITbFabricInstance';
 import { ITbFabricApi } from './interfaces';
 
@@ -40,10 +40,14 @@
         }),
     );
 
-const mapToFabricColumns = (tbColumns: ColumnModel[]): Partial<IColumn>[] =>
+const mapToFabricColumns = (
+    tbColumns: ColumnModel[],
+    fabricColumnProps: { [key: string]: Partial<TbSupportedIColumnProps> },
+): Partial<IColumn>[] =>
     tbColumns.map((column) => {
+        const fabricProps = fabricColumnProps[column.name];
         return {
             key: column.name!,
             name: column.label,
             isFiltered: columnHasFilter(column),
             isSorted: column.sortDirection !== ColumnSortDirection.None,
@@ -51,15 +55,23 @@
                 column.sortDirection !== ColumnSortDirection.None
                     ? column.sortDirection === ColumnSortDirection.Descending
                     : false,
+            ...fabricProps,
         };
     });
 
 const useTbFabric = (
     initColumns: ITbColumnProxy[],
     source: string | Request | TubularHttpClientAbstract | any[],
     tubularOptions?: Partial<ITbOptions>,
 ): ITbFabricInstance => {
     const { deps, ...rest } = tubularOptions;
+    const fabricColumnProps: { [key: string]: Partial<TbSupportedIColumnProps> } = {};
+    initColumns.forEach((element) => {
+        fabricColumnProps[element.name] = {
+            maxWidth: element.maxWidth,
+            minWidth: element.minWidth,
+        };
+    });
     const tbColumns = React.useMemo(() => createInitialTbColumns(initColumns), [initColumns]);
     const { state: tbState, api: tbApi } = useTubular(tbColumns, source, rest);
     const [list, setListState] = React.useState({
@@ -71,13 +83,13 @@
 
     const isCtrlKeyPressed = React.useRef<boolean>(false);
 
     const handleKeyDown = (event: any) => {
         if (event.key === 'Control' && !isCtrlKeyPressed.current) {
             isCtrlKeyPressed.current = true;
         }
     };
 
     const handleKeyUp = (event: any) => {
         if (event.key === 'Control' && isCtrlKeyPressed) {
             isCtrlKeyPressed.current = false;
         }
@@ -177,7 +189,7 @@
     const clearFilter = (columnName: string) => applyOrResetFilter(columnName, null);
 
     const fabricColumnsMapper = (item) => {
         const mapped: any = {};
         const tbColumns = tbState.columns;
 
         tbColumns.forEach((col) => {
@@ -224,13 +236,13 @@
                 items: newItems,
             };
         });
     }, [tbState.data, tbState.error]);
 
     const listDeps = deps || [];
 
     React.useEffect(() => {
         resetList();
     }, listDeps);
 
     const api: ITbFabricApi = {
         ...tbApi,
@@ -248,8 +260,12 @@
     };
 
     const filteredFabricColumns = React.useMemo(
-        () => mapToFabricColumns(tbState.columns.filter((c) => c.visible)),
+        () =>
+            mapToFabricColumns(
+                tbState.columns.filter((c) => c.visible),
+                fabricColumnProps,
+            ),
         [tbState.columns],
     );
 
     const state = {