Add defaultColumnOptions

CHANGELOG.md

@@ -14,6 +14,8 @@
     - `rows`
       - ⚠️ This replace the `rowGetter` and `rowsCount` props
     - `rowClass`
+    - `defaultColumnOptions`
+      - ⚠️ This replaces the `minColumnWidth` and `defaultFormatter` props
   - `column.cellClass(row)` function support:
     - `column = { ..., cellClass(row) { return string; } }`
   - `column.minWidth`
@@ -68,6 +70,7 @@
   - ⚠️ `column.getCellActions`
     - Check [#1845](https://github.com/adazzle/react-data-grid/pull/1845) on how to migrate
   - ⚠️ `column.getRowMetaData`
+  - ⚠️ `column.minColumnWidth`
   - ⚠️ `column.filterable`
   - ⚠️ `column.draggable`
   - ⚠️ `cellRangeSelection.{onStart,onUpdate,onEnd}`

src/Cell.test.tsx

@@ -13,6 +13,8 @@ const defaultColumn: CalculatedColumn<Row> = {
   name: 'Desciption',
   width: 100,
   left: 0,
+  resizable: false,
+  sortable: false,
   formatter: SimpleCellFormatter
 };
 

src/Columns.tsx

@@ -9,6 +9,7 @@ export const SelectColumn: Column<any, any> = {
   name: '',
   width: 35,
   maxWidth: 35,
+  resizable: false,
   frozen: true,
   headerRenderer(props) {
     return (

src/DataGrid.tsx

@@ -16,7 +16,6 @@ import HeaderRow from './HeaderRow';
 import FilterRow from './FilterRow';
 import Row from './Row';
 import SummaryRow from './SummaryRow';
-import { ValueFormatter } from './formatters';
 import { legacyCellInput } from './editors';
 import {
   assertIsValidKey,
@@ -34,7 +33,6 @@ import {
   CheckCellIsEditableEvent,
   Column,
   Filters,
-  FormatterProps,
   Position,
   RowRendererProps,
   RowsUpdateEvent,
@@ -53,6 +51,13 @@ interface EditCellState extends Position {
   key: string | null;
 }
 
+type DefaultColumnOptions<R, SR> = Pick<Column<R, SR>,
+  | 'formatter'
+  | 'minWidth'
+  | 'resizable'
+  | 'sortable'
+>;
+
 export interface DataGridHandle {
   scrollToColumn: (colIdx: number) => void;
   scrollToRow: (rowIdx: number) => void;
@@ -97,8 +102,6 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   width?: number;
   /** The height of the grid in pixels */
   height?: number;
-  /** Minimum column width in pixels */
-  minColumnWidth?: number;
   /** The height of each row in pixels */
   rowHeight?: number;
   /** The height of the header row in pixels */
@@ -121,11 +124,11 @@ export interface DataGridProps<R, K extends keyof R, SR = unknown> extends Share
   onSort?: (columnKey: string, direction: SortDirection) => void;
   filters?: Filters;
   onFiltersChange?: (filters: Filters) => void;
+  defaultColumnOptions?: DefaultColumnOptions<R, SR>;
 
   /**
    * Custom renderers
    */
-  defaultFormatter?: React.ComponentType<FormatterProps<R, SR>>;
   rowRenderer?: React.ComponentType<RowRendererProps<R, SR>>;
   emptyRowsRenderer?: React.ComponentType;
 
@@ -177,7 +180,6 @@ function DataGrid<R, K extends keyof R, SR>({
   // Dimensions props
   width,
   height = 350,
-  minColumnWidth = 80,
   rowHeight = 35,
   headerRowHeight = rowHeight,
   headerFiltersHeight = 45,
@@ -189,8 +191,8 @@ function DataGrid<R, K extends keyof R, SR>({
   onSort,
   filters,
   onFiltersChange,
+  defaultColumnOptions,
   // Custom renderers
-  defaultFormatter = ValueFormatter,
   rowRenderer: RowRenderer = Row,
   emptyRowsRenderer,
   // Event props
@@ -248,11 +250,10 @@ function DataGrid<R, K extends keyof R, SR>({
 
   const { columns, viewportColumns, totalColumnWidth, lastFrozenColumnIndex } = useViewportColumns({
     columns: rawColumns,
-    minColumnWidth,
     columnWidths,
-    defaultFormatter,
     scrollLeft,
-    viewportWidth
+    viewportWidth,
+    defaultColumnOptions
   });
 
   const totalHeaderHeight = headerRowHeight + (enableFilters ? headerFiltersHeight : 0);

src/HeaderCell.test.tsx

@@ -18,6 +18,8 @@ describe('HeaderCell', () => {
         name: 'bla',
         width: 150,
         left: 300,
+        resizable: false,
+        sortable: false,
         formatter: ValueFormatter,
         ...columnProps
       },

src/editors/EditorContainer.test.tsx

@@ -42,6 +42,8 @@ const fakeColumn: CalculatedColumn<Row> = {
   key: 'col1',
   width: 100,
   left: 0,
+  resizable: false,
+  sortable: false,
   formatter: ValueFormatter
 };
 

src/editors/SimpleTextEditor.test.tsx

@@ -14,6 +14,8 @@ describe('SimpleTextEditor', () => {
       name: 'name',
       width: 0,
       left: 0,
+      resizable: false,
+      sortable: false,
       formatter: ValueFormatter
     };
     const fakeBlurCb = jest.fn();

src/headerCells/SortableHeaderCell.test.tsx

@@ -14,6 +14,8 @@ describe('SortableHeaderCell', () => {
         key: 'col1',
         width: 100,
         left: 0,
+        resizable: false,
+        sortable: false,
         formatter: ValueFormatter,
         ...overrideColumn
       },

src/hooks/useViewportColumns.ts

@@ -3,10 +3,9 @@ import { useMemo } from 'react';
 import { CalculatedColumn } from '../types';
 import { getColumnMetrics, getHorizontalRangeToRender, getViewportColumns } from '../utils';
 import { DataGridProps } from '../DataGrid';
+import { ValueFormatter } from '../formatters';
 
-type SharedDataGridProps<R, K extends keyof R, SR> =
-  Pick<DataGridProps<R, K, SR>, 'columns'> &
-  Required<Required<Pick<DataGridProps<R, K, SR>, | 'minColumnWidth' | 'defaultFormatter'>>>;
+type SharedDataGridProps<R, K extends keyof R, SR> = Pick<DataGridProps<R, K, SR>, 'columns' | 'defaultColumnOptions'>;
 
 interface ViewportColumnsArgs<R, K extends keyof R, SR> extends SharedDataGridProps<R, K, SR> {
   viewportWidth: number;
@@ -16,21 +15,27 @@ interface ViewportColumnsArgs<R, K extends keyof R, SR> extends SharedDataGridPr
 
 export function useViewportColumns<R, K extends keyof R, SR>({
   columns: rawColumns,
-  minColumnWidth,
   columnWidths,
   viewportWidth,
-  defaultFormatter,
-  scrollLeft
+  scrollLeft,
+  defaultColumnOptions
 }: ViewportColumnsArgs<R, K, SR>) {
+  const minColumnWidth = defaultColumnOptions?.minWidth ?? 80;
+  const defaultFormatter = defaultColumnOptions?.formatter ?? ValueFormatter;
+  const defaultSortable = defaultColumnOptions?.sortable ?? false;
+  const defaultResizable = defaultColumnOptions?.resizable ?? false;
+
   const { columns, lastFrozenColumnIndex, totalColumnWidth } = useMemo(() => {
     return getColumnMetrics<R, SR>({
       columns: rawColumns,
       minColumnWidth,
       viewportWidth,
       columnWidths,
+      defaultSortable,
+      defaultResizable,
       defaultFormatter
     });
-  }, [columnWidths, rawColumns, defaultFormatter, minColumnWidth, viewportWidth]);
+  }, [columnWidths, defaultFormatter, defaultResizable, defaultSortable, minColumnWidth, rawColumns, viewportWidth]);
 
   const [colOverscanStartIdx, colOverscanEndIdx] = useMemo((): [number, number] => {
     return getHorizontalRangeToRender(

src/test/GridPropHelpers.ts

@@ -14,20 +14,26 @@ const columns: CalculatedColumn<Row>[] = [{
   name: 'ID',
   width: 100,
   left: 0,
+  resizable: false,
+  sortable: false,
   formatter: SimpleCellFormatter
 }, {
   idx: 1,
   key: 'title',
   name: 'Title',
   width: 100,
   left: 100,
+  resizable: false,
+  sortable: false,
   formatter: ValueFormatter
 }, {
   idx: 2,
   key: 'count',
   name: 'Count',
   width: 100,
   left: 200,
+  resizable: false,
+  sortable: false,
   formatter: ValueFormatter
 }];
 

src/test/utils.ts

@@ -10,6 +10,8 @@ function createColumn(index: number): CalculatedColumn<{ [key: string]: React.Re
     idx: index,
     width: 100,
     left: 100 * index,
+    resizable: false,
+    sortable: false,
     formatter: ValueFormatter
   };
 }

src/types.ts

@@ -51,6 +51,8 @@ export interface CalculatedColumn<TRow, TSummaryRow = unknown> extends Column<TR
   idx: number;
   width: number;
   left: number;
+  resizable: boolean;
+  sortable: boolean;
   formatter: React.ComponentType<FormatterProps<TRow, TSummaryRow>>;
 }
 

src/utils/columnUtils.test.ts

@@ -33,6 +33,8 @@ describe('getColumnMetrics', () => {
       viewportWidth,
       minColumnWidth: 50,
       columnWidths: new Map(),
+      defaultResizable: false,
+      defaultSortable: false,
       defaultFormatter: ValueFormatter
     });
 
@@ -48,6 +50,8 @@ describe('getColumnMetrics', () => {
       viewportWidth,
       minColumnWidth: 50,
       columnWidths: new Map(),
+      defaultResizable: false,
+      defaultSortable: false,
       defaultFormatter: ValueFormatter
     });
 
@@ -67,6 +71,8 @@ describe('getColumnMetrics', () => {
       viewportWidth,
       minColumnWidth: 50,
       columnWidths: new Map(),
+      defaultResizable: false,
+      defaultSortable: false,
       defaultFormatter: ValueFormatter
     });
     expect(metrics.columns[0]).toMatchObject(firstFrozenColumn);
@@ -132,6 +138,8 @@ describe('canEdit', () => {
     name: 'ID',
     left: 460,
     width: 150,
+    resizable: false,
+    sortable: false,
     formatter: ValueFormatter
   };
 

src/utils/columnUtils.ts

@@ -6,6 +6,8 @@ interface Metrics<R, SR> {
   columnWidths: ReadonlyMap<string, number>;
   minColumnWidth: number;
   viewportWidth: number;
+  defaultResizable: boolean;
+  defaultSortable: boolean;
   defaultFormatter: React.ComponentType<FormatterProps<R, SR>>;
 }
 
@@ -57,6 +59,8 @@ export function getColumnMetrics<R, SR>(metrics: Metrics<R, SR>): ColumnMetrics<
       idx,
       width,
       left,
+      sortable: column.resizable ?? metrics.defaultSortable,
+      resizable: column.resizable ?? metrics.defaultResizable,
       formatter: column.formatter ?? metrics.defaultFormatter
     };
     totalWidth += width;

src/utils/viewportUtils.test.ts

@@ -51,6 +51,8 @@ describe('getHorizontalRangeToRender', () => {
       name: `col${i}`,
       width: 100,
       left: i * 100,
+      resizable: false,
+      sortable: false,
       formatter: ValueFormatter
     }));
   }