Merge pull request #173 from komarovalexander/feature/multi-columns-h…

…eader Grouped Columns
komarovalexander · Aug 8, 2021 · 339a589 · 339a589
2 parents 2fbd8d7 + fac7e63
commit 339a589
Show file tree

Hide file tree

Showing 68 changed files with 992 additions and 312 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "6.11.4",
+  "version": "7.0.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

diff --git a/src/Demos/AlertCellDemo/AlertCellDemo.tsx b/src/Demos/AlertCellDemo/AlertCellDemo.tsx
@@ -32,7 +32,7 @@ const AlertCell: React.FC<ICellTextProps> = ({
 
 const tablePropsInit: ITableProps = {
   columns: [
-    { key: 'command1', style: { width: 40, textAlign: 'center' } },
+    { key: 'command1', style: { textAlign: 'center' }, width: 70 },
     { key: 'column1-1', field: 'column1', title: 'Column 1', dataType: DataType.String },
     { key: 'column1-2', field: 'column1', title: 'Column 1', dataType: DataType.String },
     { key: 'column2', title: 'Column 2', dataType: DataType.String },

diff --git a/src/Demos/ColumnReorderingDemo/ColumnReorderingDemo.tsx b/src/Demos/ColumnReorderingDemo/ColumnReorderingDemo.tsx
@@ -8,7 +8,7 @@ import { DispatchFunc } from '../../lib/types';
 const columns: Column[] = Array(15).fill(undefined).map(
   (_, index) => ({
     key: 'column' + index,
-    style: { width: 150 },
+    width: 200,
     title: 'Column ' + index,
     type: DataType.String,
   }),

diff --git a/src/Demos/ColumnResizingDemo/ColumnResizingDemo.tsx b/src/Demos/ColumnResizingDemo/ColumnResizingDemo.tsx
@@ -10,7 +10,8 @@ import { DispatchFunc } from '../../lib/types';
 const columns: Column[] = Array(15).fill(undefined).map(
   (_, index) => ({
     key: 'column' + index,
-    style: { width: 150, minWidth: 100 },
+    colGroup: { style: { minWidth: 100 }},
+    width: 200,
     title: 'Column ' + index,
     type: DataType.String,
   }),

diff --git a/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx b/src/Demos/ColumnSettingsDemo/ColumnSettingsDemo.tsx
@@ -46,7 +46,8 @@ const ColumnSettings: React.FC<ITableAllProps> = (tableProps: ITableAllProps) =>
       key: 'visible',
       title: 'Visible',
       isEditable: false,
-      style: { width: 45 },
+      style: { textAlign: 'center' },
+      width: 80,
       dataType: DataType.Boolean
     }],
     editingMode: EditingMode.None,

diff --git a/src/Demos/CustomCellDemo/CustomCellDemo.tsx b/src/Demos/CustomCellDemo/CustomCellDemo.tsx
@@ -29,33 +29,33 @@ const tablePropsInit: ITableProps = {
     {
       dataType: DataType.String,
       key: 'representative.name',
-      style: { width: '200px' },
+      width: 210,
       title: 'Representative',
     },
     {
       dataType: DataType.Boolean,
       key: 'company.hasLoyalProgram',
-      style: { width: '170px', textAlign: 'center' },
+      style: { textAlign: 'center' },
+      width: 200,
       title: 'Loyal Program',
     },
     {
       dataType: DataType.String,
       key: 'product.name',
-      style: {
-        width: '80px',
-      },
+      width: 110,
       title: 'Product',
     },
     {
       dataType: DataType.Number,
       key: 'product.price',
-      style: { width: '100px', textAlign: 'right' },
+      style: { textAlign: 'right' },
+      width: 130,
       title: 'Price',
     },
     {
       dataType: DataType.Date,
       key: 'firstDealDate',
-      style: { width: '150px' },
+      width: 150,
       title: 'First Deal Date',
     },
   ],

diff --git a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx
@@ -31,7 +31,7 @@ const tablePropsInit: ITableProps = {
       dataType: DataType.String,
       key: 'name',
       sortDirection: SortDirection.Descend,
-      style: { width: 60 },
+      width: 100,
       title: 'Student',
     },
     { key: 'score', title: 'Score', dataType: DataType.Number },

diff --git a/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx b/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx
@@ -70,12 +70,12 @@ const CustomLookupEditor: React.FC<ICellEditorProps> = ({
 
 const tablePropsInit: ITableProps = {
   columns: [
-    { dataType: DataType.String, key: 'name', title: 'Name', style: { width: '330px' } },
-    { key: 'score', title: 'Score', dataType: DataType.Number, style: { width: '50px' } },
+    { dataType: DataType.String, key: 'name', title: 'Name', width: 390 },
+    { key: 'score', title: 'Score', dataType: DataType.Number, width: 90 },
     {
       dataType: DataType.Boolean,
       key: 'passed',
-      style: { width: '50px' },
+      width: 90,
       title: 'Passed',
     },
     {

diff --git a/src/Demos/CustomPagingDemo/CustomPagingDemo.tsx b/src/Demos/CustomPagingDemo/CustomPagingDemo.tsx
@@ -5,7 +5,7 @@ import React, { useState } from 'react';
 import { ITableProps, kaReducer, Table } from '../../lib';
 import { updatePageIndex, updatePageSize } from '../../lib/actionCreators';
 import { DataType } from '../../lib/enums';
-import { IPagingPagesProps, IPagingProps } from '../../lib/props';
+import { IPagingProps } from '../../lib/props';
 import { DispatchFunc } from '../../lib/types';
 
 const dataArray = Array(180).fill(undefined).map(
@@ -51,7 +51,7 @@ const PageSizeSelector: React.FC<IPagingProps> = ({ pageSize, pageSizes, dispatc
   </>
 )
 
-const PagesSelector: React.FC<IPagingPagesProps> = ({ pageIndex, pagesCount, dispatch }) =>  (
+const PagesSelector: React.FC<IPagingProps> = ({ pageIndex, pagesCount, dispatch }) =>  (
   <>
     Page Number:
     <select

diff --git a/src/Demos/DeleteRowDemo/DeleteRowDemo.tsx b/src/Demos/DeleteRowDemo/DeleteRowDemo.tsx
@@ -38,7 +38,7 @@ const tablePropsInit: ITableProps = {
     { key: 'column2', title: 'Column 2', dataType: DataType.String },
     { key: 'column3', title: 'Column 3', dataType: DataType.String },
     { key: 'column4', title: 'Column 4', dataType: DataType.String },
-    { key: ':delete', style: { width: 40, textAlign: 'center' } },
+    { key: ':delete', width: 70, style: { textAlign: 'center' } },
   ],
   data: dataArray,
   rowKeyField: 'id',

diff --git a/src/Demos/Demos.tsx b/src/Demos/Demos.tsx
@@ -37,6 +37,7 @@ import FixedColumnDemo from './FixedColumnDemo/FixedColumnDemo';
 import { initializeGA, trackEvent } from './ga';
 import { withTracker } from './GAWrapper';
 import GetDataByPropsDemo from './GetDataByPropsDemo/GetDataByPropsDemo';
+import GroupedColumnsDemo from './GroupedColumnsDemo/GroupedColumnsDemo';
 import GroupingCustomCellDemo from './GroupingCustomCellDemo/GroupingCustomCellDemo';
 import GroupingCustomRowDemo from './GroupingCustomRowDemo/GroupingCustomRowDemo';
 import GroupingDemo from './GroupingDemo/GroupingDemo';
@@ -119,6 +120,7 @@ const demos: Demo[] = [
   new Demo(ManyRowsGroupingDemo, '/many-rows-grouping', '10k Grouped', 'ManyRowsGroupingDemo', 'https://stackblitz.com/edit/table-many-rows-grouping-js', 'https://stackblitz.com/edit/table-many-rows-grouping-ts', 'Virtual Scrolling'),
   new Demo(ManyRowsMemoDemo, '/many-rows-memo', '300K Rows & memo', 'ManyRowsMemoDemo', 'https://stackblitz.com/edit/table-many-rows-memo-js', 'https://stackblitz.com/edit/table-many-rows-memo-ts', 'Virtual Scrolling'),
   new Demo(MaterialDemo, '/material', 'Material', 'MaterialDemo', 'https://stackblitz.com/edit/table-material-js', 'https://stackblitz.com/edit/table-material-ts', 'Themes'),
+  new Demo(GroupedColumnsDemo, '/grouped-columns', 'Grouped Columns', 'GroupedColumnsDemo', 'https://stackblitz.com/edit/table-grouped-columns-js', 'https://stackblitz.com/edit/table-grouped-columns-ts', 'Grouping'),
   new Demo(NullableCellDataDemo, '/nullable-cell-data', 'Nullable Cell Data', 'NullableCellDataDemo', 'https://stackblitz.com/edit/table-nullable-cell-data-js', 'https://stackblitz.com/edit/table-nullable-cell-data-ts', 'Miscellaneous'),
   new Demo(PagingDemo, '/paging', 'Paging', 'PagingDemo', 'https://stackblitz.com/edit/table-paging-js', 'https://stackblitz.com/edit/table-paging-ts', ''),
   new Demo(PrintDemo, '/print', 'Print', 'PrintDemo', 'https://stackblitz.com/edit/table-print-js', 'https://stackblitz.com/edit/table-print-ts', 'Export / Print'),

diff --git a/src/Demos/DemosMenu.tsx b/src/Demos/DemosMenu.tsx
@@ -22,6 +22,7 @@ const synonyms: { [value: string]: any[] } = {
   'EventsDemo': ['Action', 'Click'],
   'FilterRowCustomEditorDemo': ['filterRowCell'],
   'FixedColumnDemo': ['Sticky'],
+  'GroupedColumnsDemo': ['Header', 'Many', 'Multi'],
   'ManyColumnsDemo': ['horizontal'],
   'NullableCellDataDemo': ['groupsExpanded'],
   'PagingDemo': ['pageSize'],

diff --git a/src/Demos/EditingDemo/EditingDemo.tsx b/src/Demos/EditingDemo/EditingDemo.tsx
@@ -15,9 +15,9 @@ const dataArray: any[] = [
 
 const tablePropsInit: ITableProps = {
   columns: [
-    { key: 'name', title: 'Name', dataType: DataType.String, style: { width: '30%' } },
-    { key: 'score', title: 'Score', dataType: DataType.Number, style: { width: '40px' } },
-    { key: 'passed', title: 'Passed', dataType: DataType.Boolean, style: { width: '10%' }},
+    { key: 'name', title: 'Name', dataType: DataType.String, width: '30%' },
+    { key: 'score', title: 'Score', dataType: DataType.Number, width: 80 },
+    { key: 'passed', title: 'Passed', dataType: DataType.Boolean, width: '10%' },
     {
       dataType: DataType.Date,
       key: 'nextTry',

diff --git a/src/Demos/EditingRowDemo/EditingRowDemo.tsx b/src/Demos/EditingRowDemo/EditingRowDemo.tsx
@@ -68,7 +68,7 @@ const tablePropsInit: ITableProps = {
     { key: 'score', title: 'Score', dataType: DataType.Number },
     { key: 'passed', title: 'Passed', dataType: DataType.Boolean },
     { key: 'nextTry', title: 'Next Try', dataType: DataType.Date },
-    { key: 'editColumn', style: { width: 50 } },
+    { key: 'editColumn', width: 80 },
   ],
   format: ({ column, value }) => {
     if (column.dataType === DataType.Date){

diff --git a/src/Demos/FixedColumnDemo/FixedColumnDemo.tsx b/src/Demos/FixedColumnDemo/FixedColumnDemo.tsx
@@ -8,7 +8,7 @@ import { DispatchFunc } from '../../lib/types';
 const columns: Column[] = Array(20).fill(undefined).map(
   (_, index) => ({
     key: 'column' + index,
-    style: { width: 150 },
+    width: 150,
     title: 'Column ' + index,
     type: DataType.String,
   }),

diff --git a/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.scss b/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.scss
@@ -0,0 +1,9 @@
+
+.group-header-column-demo{
+  .ka-thead-grouped-cell {
+    box-shadow: inset 0px 0px 0px 1px #F9FBFC;
+  }
+  .ka-cell{
+    border: 1px solid #F9FBFC;
+  }
+}
diff --git a/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.test.tsx b/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.test.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+import GroupedColumnsDemo from './GroupedColumnsDemo';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<GroupedColumnsDemo />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});
diff --git a/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.tsx b/src/Demos/GroupedColumnsDemo/GroupedColumnsDemo.tsx
@@ -0,0 +1,71 @@
+import './GroupedColumnsDemo.scss';
+
+import React, { useState } from 'react';
+
+import { ITableProps, kaReducer, Table } from '../../lib';
+import { DataType, SortingMode } from '../../lib/enums';
+import { Column } from '../../lib/models';
+import { DispatchFunc } from '../../lib/types';
+
+const columns: Column[] = Array(15).fill(undefined).map(
+  (_, index) => ({
+    key: 'column' + index,
+    width: 200,
+    title: 'Column ' + index,
+    type: DataType.String,
+  }),
+);
+
+const dataArray = Array(30).fill(undefined).map(
+  (_, index) => columns.reduce((previousValue: any, column) => ({
+    ...previousValue,
+    [column.key]: `${column.key} row:${index}`
+  }), { id: index }),
+);
+
+const tablePropsInit: ITableProps = {
+  columnResizing: true,
+  groupedColumns: [ {
+    key: 'grouped.column1',
+    title: 'Group 1',
+    columnsKeys: ['grouped.column2', 'grouped.column3']
+  }, {
+    key: 'grouped.column2',
+    title: 'Subgroup 1',
+    columnsKeys: ['column1', 'column2']
+  }, {
+    key: 'grouped.column3',
+    title: 'Subgroup 2',
+    columnsKeys: ['column3', 'column4', 'column5']
+  }, {
+    key: 'grouped.column4',
+    title: 'Group 2',
+    columnsKeys: ['column7', 'column8']
+  }, {
+    key: 'grouped.column5',
+    title: 'Group 3',
+    columnsKeys: ['column9', 'column10', 'column14']
+  }],
+  columns,
+  data: dataArray,
+  rowKeyField: 'id',
+  sortingMode: SortingMode.Single
+};
+
+const GroupedColumnsDemo: React.FC = () => {
+  const [tableProps, changeTableProps] = useState(tablePropsInit);
+  const dispatch: DispatchFunc = (action) => {
+    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
+  };
+
+  return (
+    <div className='group-header-column-demo'>
+      <Table
+        {...tableProps}
+        dispatch={dispatch}
+      />
+    </div>
+  );
+};
+
+export default GroupedColumnsDemo;
diff --git a/src/Demos/GroupingCustomCellDemo/GroupingCustomCellDemo.tsx b/src/Demos/GroupingCustomCellDemo/GroupingCustomCellDemo.tsx
@@ -32,7 +32,7 @@ const tablePropsInit: ITableProps = {
     {
       dataType: DataType.Number,
       key: 'age',
-      style: { width: '50%' },
+      width: '50%',
       title: 'AGE',
     },
   ],

diff --git a/src/Demos/GroupingCustomRowDemo/GroupingCustomRowDemo.tsx b/src/Demos/GroupingCustomRowDemo/GroupingCustomRowDemo.tsx
@@ -54,7 +54,7 @@ const tablePropsInit: ITableProps = {
     {
       dataType: DataType.Number,
       key: 'age',
-      style: { width: '50%' },
+      width: '50%',
       title: 'AGE',
     },
   ],

diff --git a/src/Demos/GroupingDemo/GroupingDemo.tsx b/src/Demos/GroupingDemo/GroupingDemo.tsx
@@ -17,7 +17,7 @@ const tablePropsInit: ITableProps = {
     { key: 'type', title: 'TYPE', dataType: DataType.String },
     { key: 'name', title: 'NAME', dataType: DataType.String },
     { key: 'country', title: 'COUNTRY', dataType: DataType.String },
-    { key: 'age', title: 'AGE', dataType: DataType.Number, style: { width: '50%' } },
+    { key: 'age', title: 'AGE', dataType: DataType.Number, width: '50%' },
   ],
   data: dataArray,
   editingMode: EditingMode.Cell,

diff --git a/src/Demos/GroupingSummaryDemo/GroupingSummaryDemo.tsx b/src/Demos/GroupingSummaryDemo/GroupingSummaryDemo.tsx
@@ -17,7 +17,7 @@ const tablePropsInit: ITableProps = {
     { key: 'type', title: 'TYPE', dataType: DataType.String },
     { key: 'name', title: 'NAME', dataType: DataType.String },
     { key: 'country', title: 'COUNTRY', dataType: DataType.String },
-    { key: 'age', title: 'AGE', dataType: DataType.Number, style: { width: '50%' } },
+    { key: 'age', title: 'AGE', dataType: DataType.Number, width: '50%' },
   ],
   data: dataArray,
   groups: [{ columnKey: 'country', enableSummary: false }, { columnKey: 'type', enableSummary: true }],

diff --git a/src/Demos/InfiniteScrollingDemo/InfiniteScrollingDemo.tsx b/src/Demos/InfiniteScrollingDemo/InfiniteScrollingDemo.tsx
@@ -49,7 +49,8 @@ const InfiniteScrollingDemo: React.FC = () => {
             onScroll: (event, { baseFunc }) => {
               baseFunc(event);
               const element =  event.currentTarget;
-              if (element.offsetHeight + element.scrollTop >= element.scrollHeight) {
+              const BOTTOM_OFFSET = 20;
+              if (element.offsetHeight + element.scrollTop >= element.scrollHeight - BOTTOM_OFFSET) {
                 dispatch({ type: LOAD_MORE_DATA });
               }
             },

diff --git a/src/Demos/ManyColumnsDemo/ManyColumnsDemo.tsx b/src/Demos/ManyColumnsDemo/ManyColumnsDemo.tsx
@@ -8,7 +8,7 @@ import { DispatchFunc } from '../../lib/types';
 const columns: Column[] = Array(100).fill(undefined).map(
   (_, index) => ({
     key: 'column' + index,
-    style: { width: 150 },
+    width: 190,
     title: 'Column ' + index,
     type: DataType.String,
   }),

diff --git a/src/Demos/MenuItems.tsx b/src/Demos/MenuItems.tsx
@@ -11,8 +11,8 @@ export class MenuItem {
   public isActive?: boolean;
 }
 
-const newItems: string[] = ['SummaryDemo', 'GroupingSummaryDemo', 'TreeModeDemo'];
-const updateItems: string[] = ['Miscellaneous', 'Grouping'];
+const newItems: string[] = ['GroupedColumnsDemo'];
+const updateItems: string[] = ['Grouping'];
 
 const MenuItems: React.FC<{ items: MenuItem[] }> = ({ items }) => {
 

diff --git a/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx b/src/Demos/NullableCellDataDemo/NullableCellDataDemo.tsx
@@ -34,7 +34,7 @@ const tablePropsInit: ITableProps = {
     {
       dataType: DataType.String,
       key: 'representative.name',
-      style: { width: '120px' },
+      width: 150,
       title: 'Representative',
     },
     {
@@ -46,18 +46,16 @@ const tablePropsInit: ITableProps = {
       dataType: DataType.String,
       filterRowValue: 'e',
       key: 'product.name',
-      style: {
-        width: '80px',
-      },
+      width: 110,
       title: 'Product',
     },
     {
       dataType: DataType.Number,
       key: 'product.price',
       sortDirection: SortDirection.Ascend,
+      width: 110,
       style: {
         textAlign: 'right',
-        width: '100px',
       },
       title: 'Product Price',
     },
@@ -66,9 +64,9 @@ const tablePropsInit: ITableProps = {
       filterRowOperator: '<',
       filterRowValue: new Date(2015, 1, 2),
       key: 'firstDealDate',
+      width: 190,
       style: {
         textAlign: 'center',
-        width: '165px',
       },
       title: 'First Deal Date',
     },