diff --git a/packages/core/src/components/DataTable/DataTable.tsx b/packages/core/src/components/DataTable/DataTable.tsx index ff320b087..de6276e84 100644 --- a/packages/core/src/components/DataTable/DataTable.tsx +++ b/packages/core/src/components/DataTable/DataTable.tsx @@ -66,6 +66,8 @@ export class DataTable extends React.Component { - this.cache.clearAll(); - this.forceUpdate(); - }, 0); - } - if (this.props.data !== prevProps.data) { this.keys = getKeys(this.props.keys!, this.props.data!); this.setState({ expandedRows: new Set(), }); + } else if (dynamicRowHeight && (filteredDataChanged || dimensionsChanged || sortChanged)) { + // We need to make sure the cache is cleared before React tries to re-render. + if (this.timeoutId) window.clearTimeout(this.timeoutId); + this.timeoutId = window.setTimeout(() => { + this.cache.clearAll(); + this.forceUpdate(); + }); } } @@ -224,10 +222,11 @@ export class DataTable extends React.Component { + if (this.timeoutId) window.clearTimeout(this.timeoutId); + this.timeoutId = window.setTimeout(() => { this.cache.clearAll(); this.forceUpdate(); - }, 0); + }); } }; diff --git a/packages/core/src/components/DataTable/constants.tsx b/packages/core/src/components/DataTable/constants.tsx index a3a479f41..2767610d1 100644 --- a/packages/core/src/components/DataTable/constants.tsx +++ b/packages/core/src/components/DataTable/constants.tsx @@ -1,4 +1,4 @@ -import { WidthProperties } from './types'; +import { WidthProperties, RowHeightOptions } from './types'; export const SELECTION_OPTIONS = { ACTIVE: 'ACTIVE', @@ -13,7 +13,7 @@ export const STATUS_OPTIONS = { }; type HeightMap = { - [key: string]: number; + [key in RowHeightOptions]: number; }; export const HEIGHT_TO_PX: HeightMap = { @@ -21,6 +21,7 @@ export const HEIGHT_TO_PX: HeightMap = { small: 48, regular: 56, large: 64, + xLarge: 80, jumbo: 108, }; diff --git a/packages/core/src/components/DataTable/types.ts b/packages/core/src/components/DataTable/types.ts index e19702451..edf8a736a 100644 --- a/packages/core/src/components/DataTable/types.ts +++ b/packages/core/src/components/DataTable/types.ts @@ -5,7 +5,7 @@ import { DataTable } from './DataTable'; export type DataTableRef = (instance: DataTable) => void; export type TableRef = React.RefObject; -export type RowHeightOptions = string; +export type RowHeightOptions = 'micro' | 'small' | 'regular' | 'large' | 'xLarge' | 'jumbo'; export type HeightOptions = RowHeightOptions | undefined; export type ColumnLabelCase = 'sentence' | 'title' | 'uppercase' | ''; @@ -45,6 +45,8 @@ export interface DataTableProps { height?: number; /** References row fields to render as columns, infered from data if not specified. */ keys?: string[]; + /** If dynamicRowHeight is enabled, this sets the maximum value for measured row height. */ + maximumDynamicRowHeight?: number; /** If dynamicRowHeight is enabled, this sets the minimum value for measured row height. */ minimumDynamicRowHeight?: number; /** diff --git a/packages/core/test/components/DataTable.test.tsx b/packages/core/test/components/DataTable.test.tsx index 89f6ad6d2..9fd1efe2f 100644 --- a/packages/core/test/components/DataTable.test.tsx +++ b/packages/core/test/components/DataTable.test.tsx @@ -384,14 +384,14 @@ describe(' does not break with weird props', () => { width: 500, tableHeaderLabel: 'My Table', zebra: true, - rowHeight: 'regular', + rowHeight: 'regular' as const, columnMetadata, columnToLabel: { name: 'CUSTOM NAME', }, expandable: true, - columnHeaderHeight: 'micro', - tableHeaderHeight: 'large', + columnHeaderHeight: 'micro' as const, + tableHeaderHeight: 'large' as const, keys: ['name'], showRowDividers: true, };