From bddba43eceb41287d159619971d6cd7bc21b047c Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Fri, 13 Dec 2019 16:26:19 +0100 Subject: [PATCH 1/3] perf: dont recreate columns on every change --- CHANGELOG.md | 2 +- src-docs/src/views/datagrid/datagrid.js | 4 ++-- src/components/datagrid/column_selector.tsx | 20 ++++++++++++++------ 3 files changed, 17 insertions(+), 9 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ff40217ca3..10a6ed9405d 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `17.2.1`. +- Improved `EuiDataGrid` update performance ([#2670](https://github.com/elastic/eui/pull/2670)) ## [`17.2.1`](https://github.com/elastic/eui/tree/v17.2.1) diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index 3187e57dc63..bebb18a8509 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -60,7 +60,7 @@ const columns = [ const raw_data = []; -for (let i = 1; i < 100; i++) { +for (let i = 1; i < 500; i++) { raw_data.push({ name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'), email: {fake('{{internet.email}}')}, @@ -141,7 +141,7 @@ export default () => { sorting={{ columns: sortingColumns, onSort }} pagination={{ ...pagination, - pageSizeOptions: [10, 50, 100], + pageSizeOptions: [10, 50, 100, 500], onChangeItemsPerPage: onChangeItemsPerPage, onChangePage: onChangePage, }} diff --git a/src/components/datagrid/column_selector.tsx b/src/components/datagrid/column_selector.tsx index b65d406ab6c..e4cad45b2bf 100644 --- a/src/components/datagrid/column_selector.tsx +++ b/src/components/datagrid/column_selector.tsx @@ -1,6 +1,7 @@ import React, { Fragment, useState, + useMemo, ReactChild, ReactElement, ChangeEvent, @@ -199,11 +200,18 @@ export const useColumnSelector = ( ); - const orderedVisibleColumns = visibleColumns - .map( - columnId => - availableColumns.find(({ id }) => id === columnId) as EuiDataGridColumn // cast to avoid `undefined`, it filters those out next - ) - .filter(column => column != null); + const orderedVisibleColumns = useMemo( + () => + visibleColumns + .map( + columnId => + availableColumns.find( + ({ id }) => id === columnId + ) as EuiDataGridColumn // cast to avoid `undefined`, it filters those out next + ) + .filter(column => column != null), + [availableColumns, visibleColumns] + ); + return [columnSelector, orderedVisibleColumns]; }; From 4ce3bc58140cc6e04ee02cbe8b89525fd666e011 Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 17 Dec 2019 18:11:42 +0100 Subject: [PATCH 2/3] Update CHANGELOG.md --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 10a6ed9405d..977dccd6b45 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -- Improved `EuiDataGrid` update performance ([#2670](https://github.com/elastic/eui/pull/2670)) +- Improved `EuiDataGrid` update performance ([#2676](https://github.com/elastic/eui/pull/2676)) ## [`17.2.1`](https://github.com/elastic/eui/tree/v17.2.1) From 82f078a7c9d907c9c69f6326a83fc4030839276c Mon Sep 17 00:00:00 2001 From: Marta Bondyra Date: Tue, 17 Dec 2019 19:31:42 +0100 Subject: [PATCH 3/3] revert: the big table size --- src-docs/src/views/datagrid/datagrid.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/datagrid/datagrid.js b/src-docs/src/views/datagrid/datagrid.js index bebb18a8509..3187e57dc63 100644 --- a/src-docs/src/views/datagrid/datagrid.js +++ b/src-docs/src/views/datagrid/datagrid.js @@ -60,7 +60,7 @@ const columns = [ const raw_data = []; -for (let i = 1; i < 500; i++) { +for (let i = 1; i < 100; i++) { raw_data.push({ name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'), email: {fake('{{internet.email}}')}, @@ -141,7 +141,7 @@ export default () => { sorting={{ columns: sortingColumns, onSort }} pagination={{ ...pagination, - pageSizeOptions: [10, 50, 100, 500], + pageSizeOptions: [10, 50, 100], onChangeItemsPerPage: onChangeItemsPerPage, onChangePage: onChangePage, }}