Merge pull request #404 from komarovalexander/dev

Performance improvement: do not check every cell type while render
komarovalexander · Apr 28, 2024 · cdb2234 · cdb2234
2 parents 2d06994 + bda2eb7
commit cdb2234
Show file tree

Hide file tree

Showing 15 changed files with 18 additions and 182 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "8.12.0",
+  "version": "9.0.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

diff --git a/src/Demos/CustomCellDemo/CustomCellDemo.tsx b/src/Demos/CustomCellDemo/CustomCellDemo.tsx
@@ -64,7 +64,7 @@ const CustomCellDemo = () => {
                     return `$${value}`;
                 }
                 if (column.dataType === DataType.Date){
-                    return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
+                    return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
                 }
             }}
             data={dataArray}

diff --git a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx
@@ -21,7 +21,7 @@ const CustomDataRowDemo = () => {
                     dataType: DataType.String,
                     key: 'name',
                     sortDirection: SortDirection.Descend,
-                    width: 100,
+                    width: 150,
                     title: 'Student',
                 },
                 { key: 'score', title: 'Score', dataType: DataType.Number },

diff --git a/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx b/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx
@@ -85,7 +85,7 @@ const CustomEditorDemo: React.FC = () => {
             ]}
             format= {({ column, value }) => {
                 if (column.dataType === DataType.Date){
-                    return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
+                    return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
                 }
             }}
             data={dataArray}

diff --git a/src/Demos/EditingDemo/EditingDemo.tsx b/src/Demos/EditingDemo/EditingDemo.tsx
@@ -27,7 +27,7 @@ const EditingDemo: React.FC = () => {
             ]}
             format= {({ column, value }) => {
                 if (column.dataType === DataType.Date){
-                    return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
+                    return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
                 }
             }}
             data={dataArray}

diff --git a/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx b/src/Demos/HeaderFilterDemo/HeaderFilterDemo.tsx
@@ -41,7 +41,7 @@ const HeaderFilterDemo = () => {
             filteringMode={FilteringMode.HeaderFilter}
             format= {({ column, value }) => {
                 if (column.dataType === DataType.Date) {
-                    return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
+                    return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
                 }
             }}
             rowKeyField={'id'}

diff --git a/src/Demos/HeaderFilterLogicDemo/HeaderFilterLogicDemo.tsx b/src/Demos/HeaderFilterLogicDemo/HeaderFilterLogicDemo.tsx
@@ -96,7 +96,7 @@ const HeaderFilterLogicDemo = () => {
             filteringMode={FilteringMode.HeaderFilter}
             format={({ column, value }) => {
                 if (column.dataType === DataType.Date) {
-                    return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
+                    return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
                 }
                 if (column.key === 'departments') {
                     return value?.map((d: any) => d.name).join(', ');

diff --git a/src/Demos/HoverRowDemo/HoverRowDemo.tsx b/src/Demos/HoverRowDemo/HoverRowDemo.tsx
@@ -10,7 +10,7 @@ const ROW_MOUSE_LEAVE = 'ROW_MOUSE_LEAVE';
 
 
 const HoverRowDemo = () => {
-    const [selectedItem] = useState<typeof dataArray[number]>();
+    const [hoveredItem, setHoveredItem] = useState<typeof dataArray[number]>();
     return (
         <div className='hover-row-demo'>
             <Table
@@ -46,22 +46,21 @@ const HoverRowDemo = () => {
                             onMouseEnter: (event, extendedEvent) => {
                                 const {
                                     childProps: {
-                                        rowKeyValue,
+                                        rowData,
                                     },
-                                    dispatch,
                                 } = extendedEvent;
-                                dispatch({ type: ROW_MOUSE_ENTER, rowKeyValue });
+                                setHoveredItem(rowData);
                             },
-                            onMouseLeave: (event, { dispatch }) => {
-                                dispatch({ type: ROW_MOUSE_LEAVE });
+                            onMouseLeave: () => {
+                                setHoveredItem(undefined);
                             },
                         }),
                     }
                 }}
             />
-            { selectedItem && (
+            { hoveredItem && (
                 <div className='info'>
-          Hovered: {selectedItem.name} ({selectedItem.company.name})
+          Hovered: {hoveredItem.name} ({hoveredItem.company.name})
                 </div>
             )}
         </div>

diff --git a/src/Demos/MaterialDemo/MaterialDemo.tsx b/src/Demos/MaterialDemo/MaterialDemo.tsx
@@ -42,7 +42,7 @@ const MaterialDemo = () => {
                 ]}
                 format={({ column, value }) => {
                     if (column.dataType === DataType.Date) {
-                        return value && value.toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
+                        return value && new Date(value).toLocaleDateString('en', { month: '2-digit', day: '2-digit', year: 'numeric' });
                     }
                 }}
                 paging={{

diff --git a/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx b/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx
@@ -87,7 +87,7 @@ const NullableCellDataDemo = () => {
                         return value == null ? '-' : `$${value}`;
                     }
                     if (column.dataType === DataType.Date){
-                        return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' });
+                        return value && new Date(value).toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' });
                     }
                 }}
                 filteringMode={FilteringMode.FilterRow}

diff --git a/src/lib/Components/Popup/Popup.test.tsx b/src/lib/Components/Popup/Popup.test.tsx
@@ -6,7 +6,7 @@ const props: any = {
     column: {key: 'field'},
     childComponents: {},
     dispatch: () => {},
-    data: [{ feild: 1 }]
+    data: [{ field: 1 }]
 };
 
 it('renders without crashing', () => {

diff --git a/src/lib/Utils/FilterUtils.ts b/src/lib/Utils/FilterUtils.ts
@@ -5,7 +5,6 @@ import { Column } from '../Models/Column';
 import { EditableCell } from '../Models/EditableCell';
 import { FilterOperator } from '../Models/FilterOperator';
 import { ITableProps } from '../';
-import { convertToColumnTypes } from './TypeUtils';
 import defaultOptions from '../defaultOptions';
 import { getValueByColumn } from './DataUtils';
 import { isEmpty } from './CommonUtils';
@@ -50,7 +49,6 @@ export const filterAndSearchData = (props: ITableProps) => {
     data = [...data];
     data = extendedFilter ? extendedFilter(data) : data;
     data = searchText ? searchData(columns, data, searchText, search) : data;
-    data = convertToColumnTypes(data, columns);
     data = filterData(data, columns, filter);
     data = filterByHeaderFilter(data, columns, format);
 

diff --git a/src/lib/Utils/TypeUtils.test.ts b/src/lib/Utils/TypeUtils.test.ts
diff --git a/src/lib/Utils/TypeUtils.ts b/src/lib/Utils/TypeUtils.ts
diff --git a/src/lib/utils.ts b/src/lib/utils.ts
@@ -1,14 +1,11 @@
-
 import * as kaColumnUtils from './Utils/ColumnUtils';
 import * as kaDateUtils from './Utils/DateUtils';
-import * as kaPropsUtils from './Utils/PropsUtils';
-import * as kaTypeUtils from './Utils/TypeUtils';
 import * as kaPagingUtils from './Utils/PagingUtils';
+import * as kaPropsUtils from './Utils/PropsUtils';
 
 export {
     kaColumnUtils,
     kaDateUtils,
     kaPropsUtils,
-    kaTypeUtils,
     kaPagingUtils
 };