diff --git a/packages/core/src/components/DataTable/DataTable.tsx b/packages/core/src/components/DataTable/DataTable.tsx index de6276e84..2277b1a9b 100644 --- a/packages/core/src/components/DataTable/DataTable.tsx +++ b/packages/core/src/components/DataTable/DataTable.tsx @@ -141,14 +141,20 @@ export class DataTable extends React.Component { - this.cache.clearAll(); - this.forceUpdate(); - }); + if (!this.timeoutId) { + this.timeoutId = window.setTimeout(() => { + this.cache.clearAll(); + this.forceUpdate(); + this.timeoutId = 0; + }); + } } } + componentWillUnmount() { + if (this.timeoutId) window.clearTimeout(this.timeoutId); + } + private getTableHeight = (expandedDataList: ExpandedRow[]): number => { const { height, rowHeight, showAllRows, dynamicRowHeight } = this.props; // @ts-ignore _rowHeightCache is missing from DataTable types @@ -222,11 +228,13 @@ export class DataTable extends React.Component { - this.cache.clearAll(); - this.forceUpdate(); - }); + if (!this.timeoutId) { + this.timeoutId = window.setTimeout(() => { + this.cache.clearAll(); + this.forceUpdate(); + this.timeoutId = 0; + }); + } } }; diff --git a/packages/core/src/components/DataTable/constants.tsx b/packages/core/src/components/DataTable/constants.tsx index 2767610d1..c35b18702 100644 --- a/packages/core/src/components/DataTable/constants.tsx +++ b/packages/core/src/components/DataTable/constants.tsx @@ -21,7 +21,7 @@ export const HEIGHT_TO_PX: HeightMap = { small: 48, regular: 56, large: 64, - xLarge: 80, + xlarge: 80, jumbo: 108, }; diff --git a/packages/core/src/components/DataTable/types.ts b/packages/core/src/components/DataTable/types.ts index edf8a736a..b041fe8a0 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 = 'micro' | 'small' | 'regular' | 'large' | 'xLarge' | 'jumbo'; +export type RowHeightOptions = 'micro' | 'small' | 'regular' | 'large' | 'xlarge' | 'jumbo'; export type HeightOptions = RowHeightOptions | undefined; export type ColumnLabelCase = 'sentence' | 'title' | 'uppercase' | '';