Skip to content

Commit c625afa

Browse files
george-czgeorge-cz
authored
Table - Column resizing (#26477)
1 parent 48bbba5 commit c625afa

39 files changed

Lines changed: 2044 additions & 2 deletions

‎change/@fluentui-react-components-26b3f1b5-e553-43ef-9e69-418958d44d99.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "minor",
3+
"comment": "Added export of column sizing",
4+
"packageName": "@fluentui/react-components",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎change/@fluentui-react-table-ac85e1b5-8c5d-4ed9-8997-cda84f20e798.json‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
{
2+
"type": "prerelease",
3+
"comment": "Add support for column resizing",
4+
"packageName": "@fluentui/react-table",
5+
"email": "[email protected]",
6+
"dependentChangeType": "patch"
7+
}

‎packages/react-components/react-components/etc/react-components.unstable.api.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -122,6 +122,7 @@ import { renderTableCellActions_unstable } from '@fluentui/react-table';
122122
import { renderTableCellLayout_unstable } from '@fluentui/react-table';
123123
import { renderTableHeader_unstable } from '@fluentui/react-table';
124124
import { renderTableHeaderCell_unstable } from '@fluentui/react-table';
125+
import { renderTableResizeHandle_unstable } from '@fluentui/react-table';
125126
import { renderTableRow_unstable } from '@fluentui/react-table';
126127
import { renderTableSelectionCell_unstable } from '@fluentui/react-table';
127128
import { renderVirtualizer_unstable } from '@fluentui/react-virtualizer';
@@ -165,6 +166,7 @@ import { tableClassName } from '@fluentui/react-table';
165166
import { tableClassNames } from '@fluentui/react-table';
166167
import { TableColumnDefinition } from '@fluentui/react-table';
167168
import { TableColumnId } from '@fluentui/react-table';
169+
import { TableColumnSizingOptions } from '@fluentui/react-table';
168170
import { TableContextProvider } from '@fluentui/react-table';
169171
import { TableContextValue } from '@fluentui/react-table';
170172
import { TableContextValues } from '@fluentui/react-table';
@@ -183,6 +185,8 @@ import { TableHeaderProps } from '@fluentui/react-table';
183185
import { TableHeaderSlots } from '@fluentui/react-table';
184186
import { TableHeaderState } from '@fluentui/react-table';
185187
import { TableProps } from '@fluentui/react-table';
188+
import { TableResizeHandle } from '@fluentui/react-table';
189+
import { tableResizeHandleClassNames } from '@fluentui/react-table';
186190
import { TableRow } from '@fluentui/react-table';
187191
import { tableRowClassName } from '@fluentui/react-table';
188192
import { tableRowClassNames } from '@fluentui/react-table';
@@ -244,13 +248,16 @@ import { useTableCellActionsStyles_unstable } from '@fluentui/react-table';
244248
import { useTableCellLayout_unstable } from '@fluentui/react-table';
245249
import { useTableCellLayoutStyles_unstable } from '@fluentui/react-table';
246250
import { useTableCellStyles_unstable } from '@fluentui/react-table';
251+
import { useTableColumnSizing_unstable } from '@fluentui/react-table';
247252
import { useTableContext } from '@fluentui/react-table';
248253
import { useTableFeatures } from '@fluentui/react-table';
249254
import { UseTableFeaturesOptions } from '@fluentui/react-table';
250255
import { useTableHeader_unstable } from '@fluentui/react-table';
251256
import { useTableHeaderCell_unstable } from '@fluentui/react-table';
252257
import { useTableHeaderCellStyles_unstable } from '@fluentui/react-table';
253258
import { useTableHeaderStyles_unstable } from '@fluentui/react-table';
259+
import { useTableResizeHandle_unstable } from '@fluentui/react-table';
260+
import { useTableResizeHandleStyles_unstable } from '@fluentui/react-table';
254261
import { useTableRow_unstable } from '@fluentui/react-table';
255262
import { useTableRowIdContext } from '@fluentui/react-table';
256263
import { useTableRowStyles_unstable } from '@fluentui/react-table';
@@ -504,6 +511,8 @@ export { renderTableHeader_unstable }
504511

505512
export { renderTableHeaderCell_unstable }
506513

514+
export { renderTableResizeHandle_unstable }
515+
507516
export { renderTableRow_unstable }
508517

509518
export { renderTableSelectionCell_unstable }
@@ -590,6 +599,8 @@ export { TableColumnDefinition }
590599

591600
export { TableColumnId }
592601

602+
export { TableColumnSizingOptions }
603+
593604
export { TableContextProvider }
594605

595606
export { TableContextValue }
@@ -626,6 +637,10 @@ export { TableHeaderState }
626637

627638
export { TableProps }
628639

640+
export { TableResizeHandle }
641+
642+
export { tableResizeHandleClassNames }
643+
629644
export { TableRow }
630645

631646
export { tableRowClassName }
@@ -748,6 +763,8 @@ export { useTableCellLayoutStyles_unstable }
748763

749764
export { useTableCellStyles_unstable }
750765

766+
export { useTableColumnSizing_unstable }
767+
751768
export { useTableContext }
752769

753770
export { useTableFeatures }
@@ -762,6 +779,10 @@ export { useTableHeaderCellStyles_unstable }
762779

763780
export { useTableHeaderStyles_unstable }
764781

782+
export { useTableResizeHandle_unstable }
783+
784+
export { useTableResizeHandleStyles_unstable }
785+
765786
export { useTableRow_unstable }
766787

767788
export { useTableRowIdContext }

‎packages/react-components/react-components/src/unstable/index.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -93,6 +93,11 @@ export {
9393
useTableHeaderCellStyles_unstable,
9494
useTableHeaderCell_unstable,
9595
renderTableHeaderCell_unstable,
96+
TableResizeHandle,
97+
tableResizeHandleClassNames,
98+
useTableResizeHandleStyles_unstable,
99+
useTableResizeHandle_unstable,
100+
renderTableResizeHandle_unstable,
96101
TableContextProvider,
97102
useTableContext,
98103
TableSelectionCell,
@@ -151,6 +156,7 @@ export {
151156
dataGridSelectionCellClassNames,
152157
TableRowIdContextProvider,
153158
useTableRowIdContext,
159+
useTableColumnSizing_unstable,
154160
} from '@fluentui/react-table';
155161

156162
export type {
@@ -193,6 +199,7 @@ export type {
193199
TableRowId,
194200
TableColumnDefinition,
195201
TableColumnId,
202+
TableColumnSizingOptions,
196203
CreateTableColumnOptions,
197204
DataGridHeaderCellProps,
198205
DataGridHeaderCellSlots,

‎packages/react-components/react-table/etc/react-table.api.md‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,9 @@ export const renderTableHeader_unstable: (state: TableHeaderState) => JSX.Elemen
217217
// @public
218218
export const renderTableHeaderCell_unstable: (state: TableHeaderCellState) => JSX.Element;
219219

220+
// @public
221+
export const renderTableResizeHandle_unstable: (state: TableResizeHandleState) => JSX.Element;
222+
220223
// @public
221224
export const renderTableRow_unstable: (state: TableRowState) => JSX.Element;
222225

@@ -337,6 +340,11 @@ export interface TableColumnDefinition<TItem> {
337340
// @public (undocumented)
338341
export type TableColumnId = string | number;
339342

343+
// @public (undocumented)
344+
export type TableColumnSizingOptions = Record<TableColumnId, Partial<Pick<ColumnWidthState, 'minWidth' | 'idealWidth' | 'padding'>> & {
345+
defaultWidth?: number;
346+
}>;
347+
340348
// @public (undocumented)
341349
export const TableContextProvider: React_2.Provider<TableContextValue | undefined>;
342350

@@ -358,9 +366,11 @@ export type TableFeaturePlugin = <TItem>(tableState: TableFeaturesState<TItem>)
358366
// @public (undocumented)
359367
export interface TableFeaturesState<TItem> extends Pick<UseTableFeaturesOptions<TItem>, 'items' | 'getRowId'> {
360368
columns: TableColumnDefinition<TItem>[];
369+
columnSizing_unstable: TableColumnSizingState;
361370
getRows: <TRowState extends TableRowData<TItem> = TableRowData<TItem>>(rowEnhancer?: RowEnhancer<TItem, TRowState>) => TRowState[];
362371
selection: TableSelectionState;
363372
sort: TableSortState<TItem>;
373+
tableRef: React_2.Ref<HTMLDivElement>;
364374
}
365375

366376
// @public
@@ -385,6 +395,7 @@ export type TableHeaderCellSlots = {
385395
root: Slot<'th', 'div'>;
386396
sortIcon: Slot<'span'>;
387397
button: NonNullable<Slot<ARIAButtonSlotProps>>;
398+
aside: Slot<'span'>;
388399
};
389400

390401
// @public
@@ -410,6 +421,23 @@ export type TableHeaderState = ComponentState<TableHeaderSlots> & Pick<TableCont
410421
// @public
411422
export type TableProps = ComponentProps<TableSlots> & Partial<TableContextValue>;
412423

424+
// @public
425+
export const TableResizeHandle: ForwardRefComponent<TableResizeHandleProps>;
426+
427+
// @public (undocumented)
428+
export const tableResizeHandleClassNames: SlotClassNames<TableResizeHandleSlots>;
429+
430+
// @public
431+
export type TableResizeHandleProps = ComponentProps<TableResizeHandleSlots> & {};
432+
433+
// @public (undocumented)
434+
export type TableResizeHandleSlots = {
435+
root: Slot<'div'>;
436+
};
437+
438+
// @public
439+
export type TableResizeHandleState = ComponentState<TableResizeHandleSlots>;
440+
413441
// @public
414442
export const TableRow: ForwardRefComponent<TableRowProps>;
415443

@@ -571,6 +599,9 @@ export const useTableCellLayoutStyles_unstable: (state: TableCellLayoutState) =>
571599
// @public
572600
export const useTableCellStyles_unstable: (state: TableCellState) => TableCellState;
573601

602+
// @public (undocumented)
603+
export function useTableColumnSizing_unstable<TItem>(params?: UseTableColumnSizingParams): (tableState: TableFeaturesState<TItem>) => TableFeaturesState<TItem>;
604+
574605
// @public (undocumented)
575606
export const useTableContext: () => TableContextValue;
576607

@@ -599,6 +630,12 @@ export const useTableHeaderCellStyles_unstable: (state: TableHeaderCellState) =>
599630
// @public
600631
export const useTableHeaderStyles_unstable: (state: TableHeaderState) => TableHeaderState;
601632

633+
// @public
634+
export const useTableResizeHandle_unstable: (props: TableResizeHandleProps, ref: React_2.Ref<HTMLElement>) => TableResizeHandleState;
635+
636+
// @public
637+
export const useTableResizeHandleStyles_unstable: (state: TableResizeHandleState) => TableResizeHandleState;
638+
602639
// @public
603640
export const useTableRow_unstable: (props: TableRowProps, ref: React_2.Ref<HTMLElement>) => TableRowState;
604641

‎packages/react-components/react-table/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,7 @@
3939
"@fluentui/react-context-selector": "^9.1.7",
4040
"@fluentui/react-icons": "^2.0.175",
4141
"@fluentui/react-radio": "^9.0.22",
42+
"@fluentui/react-shared-contexts": "^9.2.0",
4243
"@fluentui/react-tabster": "^9.4.2",
4344
"@fluentui/react-theme": "^9.1.5",
4445
"@fluentui/react-utilities": "^9.5.1",

‎packages/react-components/react-table/src/TableResizeHandle.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './components/TableResizeHandle/index';

‎packages/react-components/react-table/src/components/DataGridHeaderCell/DataGridHeaderCell.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ describe('DataGridHeaderCell', () => {
1616
{
1717
props: {
1818
sortIcon: 'Test Icon',
19+
aside: 'Test aside',
1920
},
2021
},
2122
],

‎packages/react-components/react-table/src/components/DataGridHeaderCell/useDataGridHeaderCellStyles.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,7 @@ export const dataGridHeaderCellClassNames: SlotClassNames<DataGridHeaderCellSlot
77
root: 'fui-DataGridHeaderCell',
88
button: 'fui-DataGridHeaderCell__button',
99
sortIcon: 'fui-DataGridHeaderCell__sortIcon',
10+
aside: 'fui-DataGridHeaderCell__aside',
1011
};
1112

1213
/**
@@ -24,5 +25,9 @@ export const useDataGridHeaderCellStyles_unstable = (state: DataGridHeaderCellSt
2425
state.sortIcon.className = mergeClasses(dataGridHeaderCellClassNames.sortIcon, state.sortIcon.className);
2526
}
2627

28+
if (state.aside) {
29+
state.aside.className = mergeClasses(dataGridHeaderCellClassNames.aside, state.aside.className);
30+
}
31+
2732
return state;
2833
};

‎packages/react-components/react-table/src/components/TableHeaderCell/TableHeaderCell.test.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ describe('TableHeaderCell', () => {
2020
{
2121
props: {
2222
sortIcon: 'Test Icon',
23+
aside: 'Test aside',
2324
},
2425
},
2526
],

0 commit comments

Comments
 (0)