diff --git a/jest.config.js b/jest.config.js index f01f388..98bff23 100644 --- a/jest.config.js +++ b/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', - }, - }, }; diff --git a/sample/src/ColumnsDefinition.ts b/sample/src/ColumnsDefinition.ts index 01e860e..d440751 100644 --- a/sample/src/ColumnsDefinition.ts +++ b/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, }, diff --git a/src/interfaces/ITbColumn.ts b/src/interfaces/ITbColumn.ts index c057c77..3e9923f 100644 --- a/src/interfaces/ITbColumn.ts +++ b/src/interfaces/ITbColumn.ts @@ -5,4 +5,6 @@ export interface ITbColumn extends IColumn { tb?: Partial; } -export interface ITbColumnProxy extends Partial, Pick {} +export type TbSupportedIColumnProps = Partial>; + +export interface ITbColumnProxy extends Partial, TbSupportedIColumnProps {} diff --git a/src/useTbFabric.ts b/src/useTbFabric.ts index 12c13f5..b1e4feb 100644 --- a/src/useTbFabric.ts +++ b/src/useTbFabric.ts @@ -11,7 +11,7 @@ import { 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,8 +40,12 @@ const createInitialTbColumns = (proxyColumns: ITbColumnProxy[]): ColumnModel[] = }), ); -const mapToFabricColumns = (tbColumns: ColumnModel[]): Partial[] => +const mapToFabricColumns = ( + tbColumns: ColumnModel[], + fabricColumnProps: { [key: string]: Partial }, +): Partial[] => tbColumns.map((column) => { + const fabricProps = fabricColumnProps[column.name]; return { key: column.name!, name: column.label, @@ -51,6 +55,7 @@ const mapToFabricColumns = (tbColumns: ColumnModel[]): Partial[] => column.sortDirection !== ColumnSortDirection.None ? column.sortDirection === ColumnSortDirection.Descending : false, + ...fabricProps, }; }); @@ -60,6 +65,13 @@ const useTbFabric = ( tubularOptions?: Partial, ): ITbFabricInstance => { const { deps, ...rest } = tubularOptions; + const fabricColumnProps: { [key: string]: Partial } = {}; + 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({ @@ -248,7 +260,11 @@ const useTbFabric = ( }; const filteredFabricColumns = React.useMemo( - () => mapToFabricColumns(tbState.columns.filter((c) => c.visible)), + () => + mapToFabricColumns( + tbState.columns.filter((c) => c.visible), + fabricColumnProps, + ), [tbState.columns], );