Merge pull request #301 from komarovalexander/extended-data-processing

Add extendedSort option

gulpfile.js

@@ -2,14 +2,9 @@ var gulp = require('gulp');
 var file = require('gulp-file');
 
 var jsonfile = require('jsonfile')
-var ghPages = require('gulp-gh-pages');
 var replace = require('gulp-replace');
 const sass = require('gulp-sass')(require('sass'));
 
-gulp.task('gh-pages', function () {
-    return gulp.src('./build/**/*')
-        .pipe(ghPages());
-});
 
 gulp.task('demos', function () {
     return gulp

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "7.12.1",
+  "version": "7.13.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",
@@ -17,6 +17,7 @@
     "date-fns": "^2.29.3",
     "jspdf": "^2.3.1",
     "jspdf-autotable": "^3.5.13",
+    "lodash.orderby": "^4.6.0",
     "lorem-ipsum": "^2.0.3",
     "react": "17.0.2",
     "react-csv": "^2.0.3",
@@ -62,6 +63,7 @@
   },
   "devDependencies": {
     "@types/jest": "25.1.4",
+    "@types/lodash.orderby": "^4.6.7",
     "@types/node": "13.9.2",
     "@types/react-dom": "17.0.6",
     "@types/react-highlight": "^0.12.2",
@@ -70,9 +72,9 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.1",
     "coveralls": "^3.0.11",
     "enzyme": "^3.11.0",
+    "gh-pages": "^5.0.0",
     "gulp": "^4.0.2",
     "gulp-file": "^0.4.0",
-    "gulp-gh-pages": "^0.5.4",
     "gulp-replace": "^1.0.0",
     "gulp-sass": "^5.1.0",
     "jsonfile": "^6.0.1",

publishBuild.js

@@ -0,0 +1,3 @@
+var ghpages = require('gh-pages');
+
+ghpages.publish('build', function(err) {});

src/Demos/Demos.tsx

@@ -1,8 +1,8 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import './Demos.scss';
 
-import React from 'react';
 import { HashRouter, Route } from 'react-router-dom';
+import { initializeGA, trackEvent } from './ga';
 
 import AddRowDemo from './AddRowDemo/AddRowDemo';
 import AlertCellDemo from './AlertCellDemo/AlertCellDemo';
@@ -21,7 +21,6 @@ import CustomThemeDemo from './CustomThemeDemo/CustomThemeDemo';
 import DeleteRowDemo from './DeleteRowDemo/DeleteRowDemo';
 import Demo from './Demo';
 import { DemoCase } from './DemoCase';
-import getDemoPage from './DemoPage';
 import DemosMenu from './DemosMenu';
 import DetailsRowDemo from './DetailsRowDemo/DetailsRowDemo';
 import EditingDemo from './EditingDemo/EditingDemo';
@@ -35,8 +34,6 @@ import FilterRowCustomEditorDemo from './FilterRowCustomEditorDemo/FilterRowCust
 import FilterRowCustomLogicDemo from './FilterRowCustomLogicDemo/FilterRowCustomLogicDemo';
 import FilterRowDemo from './FilterRowDemo/FilterRowDemo';
 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';
@@ -60,6 +57,7 @@ import NullableCellDataDemo from './NullableCellDataDemo/NullableCellDataDemo';
 import OverviewDemo from './OverviewDemo/OverviewDemo';
 import PagingDemo from './PagingDemo/PagingDemo';
 import PrintDemo from './PrintDemo/PrintDemo';
+import React from 'react';
 import ReduxDemo from './ReduxDemo/ReduxDemo';
 import RemoteDataDemo from './RemoteDataDemo/RemoteDataDemo';
 import RemoteDataEditingDemo from './RemoteDataEditingDemo/RemoteDataEditingDemo';
@@ -70,12 +68,15 @@ import SelectionDemo from './SelectionDemo/SelectionDemo';
 import SelectionSingleDemo from './SelectionSingleDemo/SelectionSingleDemo';
 import SortingCustomLogicDemo from './SortingCustomLogicDemo/SortingCustomLogicDemo';
 import SortingDemo from './SortingDemo/SortingDemo';
+import SortingExtendedDemo from './SortingExtendedDemo/SortingExtendedDemo';
 import SortingModesDemo from './SortingModesDemo/SortingModesDemo';
 import StateStoringDemo from './StateStoringDemo/StateStoringDemo';
 import SummaryDemo from './SummaryDemo/SummaryDemo';
 import TabIndexDemo from './TabIndexDemo/TabIndexDemo';
 import TreeModeDemo from './TreeModeDemo/TreeModeDemo';
 import ValidationDemo from './ValidationDemo/ValidationDemo';
+import getDemoPage from './DemoPage';
+import { withTracker } from './GAWrapper';
 
 initializeGA();
 
@@ -141,6 +142,7 @@ const demos: Demo[] = [
   new Demo(SortingDemo, '/sorting', 'Sorting', 'SortingDemo', 'https://stackblitz.com/edit/table-sorting-js', 'https://stackblitz.com/edit/table-sorting-ts', 'Sorting'),
   new Demo(SortingModesDemo, '/sorting-modes', 'Sorting Modes', 'SortingModesDemo', 'https://stackblitz.com/edit/table-sorting-modes-js', 'https://stackblitz.com/edit/table-sorting-modes-ts', 'Sorting'),
   new Demo(SortingCustomLogicDemo, '/sorting-custom-logic', 'Sorting Logic', 'SortingCustomLogicDemo', 'https://stackblitz.com/edit/table-sorting-custom-logic-js', 'https://stackblitz.com/edit/table-sorting-custom-logic-ts', 'Sorting'),
+  new Demo(SortingExtendedDemo, '/sorting-extended', 'Sorting Extended', 'SortingExtendedDemo', 'https://stackblitz.com/edit/table-sorting-extended-js', 'https://stackblitz.com/edit/table-sorting-extended-ts', 'Sorting'),
   new Demo(StateStoringDemo, '/state-storing', 'State Storing', 'StateStoringDemo', 'https://stackblitz.com/edit/table-state-storing-js', 'https://stackblitz.com/edit/table-state-storing-ts', 'Miscellaneous'),
   new Demo(SummaryDemo, '/summary', 'Summary', 'SummaryDemo', 'https://stackblitz.com/edit/table-summary-js', 'https://stackblitz.com/edit/table-summary-ts', 'Miscellaneous'),
   new Demo(TabIndexDemo, '/tab-index', 'Tab Index', 'TabIndexDemo', 'https://stackblitz.com/edit/table-tab-index-js', 'https://stackblitz.com/edit/table-tab-index-ts', 'Miscellaneous'),

src/Demos/SortingCustomLogicDemo/SortingCustomLogicDemo.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-
 import { DataType, Table } from '../../lib';
 import { SortDirection, SortingMode } from '../../lib/enums';
 
+import React from 'react';
+
 const dataArray: any[] = [
   { id: 1, name: 'Mike Wazowski', score: 80, prevScores: [59, 65, 70], passed: true },
   { id: 2, name: 'Billi Bob', score: 55, prevScores: [60, 43, 50], passed: false },
@@ -49,7 +49,7 @@ const SortingCustomLogicDemo: React.FC = () => {
           return value.join();
         }
       }}
-      sort= {({ column }) => {
+      sort={({ column }) => {
         if (column.key === 'prevScores'){
           return (a, b) => a[0] === b[0]
             ? 0

src/Demos/SortingExtendedDemo/SortingExtendedDemo.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import SortingExtendedDemo from './SortingExtendedDemo';
+
+it('renders without crashing', () => {
+  const div = document.createElement('div');
+  ReactDOM.render(<SortingExtendedDemo />, div);
+  ReactDOM.unmountComponentAtNode(div);
+});

src/Demos/SortingExtendedDemo/SortingExtendedDemo.tsx

@@ -0,0 +1,75 @@
+import { DataType, Table } from '../../lib';
+import { SortDirection, SortingMode } from '../../lib/enums';
+
+import React from 'react';
+import orderBy from 'lodash.orderby';
+
+const dataArray: any[] = [
+  { id: 1, name: 'Mike Wazowski', score: 80, passed: true, faculty: 'Economics', comment: 'Well done!' },
+  { id: 2, name: 'Billi Bob', score: 55, passed: false, faculty: 'Engineering', comment: 'almost did it, keep going' },
+  { id: 3, name: 'Tom Williams', score: 45, passed: false, faculty: 'Engineering', comment: 'you can do it better' },
+  { id: 4, name: 'Kurt Cobain', score: 75, passed: true, faculty: 'Economics', comment: 'Well done!' },
+  { id: 5, name: 'Marshall Bruce', score: 77, passed: true, faculty: 'Mathematics', comment: 'Well done!' },
+  { id: 6, name: 'Sunny Fox', score: 33, passed: false, faculty: 'Mathematics', comment: 'It was just a bad day :)' },
+];
+
+const SortingExtendedDemo: React.FC = () => {
+  return (
+    <Table
+      columns= {[
+        {
+          dataType: DataType.Boolean,
+          key: 'passed',
+          sortDirection: SortDirection.Ascend,
+          style: {width: 90},
+          title: 'Passed',
+        },
+        {
+          dataType: DataType.String,
+          key: 'name',
+          style: {width: 100},
+          title: 'Name',
+        },
+        {
+          dataType: DataType.Number,
+          key: 'score',
+          style: {width: 120},
+          title: 'Score',
+        },
+        {
+          dataType: DataType.String,
+          key: 'faculty',
+          style: {width: 150},
+          title: 'Faculty (Custom icon)',
+        },
+        {
+          dataType: DataType.String,
+          key: 'comment',
+          style: {width: 150},
+          isSortable: false,
+          title: 'Comment (sorting disabled)',
+        }
+      ]}
+      data={dataArray}
+      format= {({ column, value }) => {
+        if (column.key === 'prevScores'){
+          return value.join();
+        }
+      }}
+      extendedSort={(data, columns) => {
+        let sortedColumns = columns.filter(c => c.sortDirection);
+        if (sortedColumns.length === 0){
+          return data;
+        }
+        sortedColumns = orderBy(sortedColumns, ['sortIndex'], ['asc']);
+        const iteratee = sortedColumns.map(c => c.key);
+        const order = sortedColumns.map(c => c.sortDirection === SortDirection.Ascend ? 'asc' : 'desc');
+        return orderBy(data, iteratee, order);
+      }}
+      rowKeyField={'id'}
+      sortingMode={SortingMode.MultipleTripleStateRemote}
+    />
+  );
+};
+
+export default SortingExtendedDemo;

src/lib/Components/Table/Table.tsx

@@ -33,6 +33,7 @@ export interface ITableProps {
   editableCells?: EditableCell[];
   editingMode?: EditingMode;
   extendedFilter?: (data: any[]) => any[];
+  extendedSort?: (data: any[], columns: Column[]) => any[];
   filter?: FilterFunc;
   filteringMode?: FilteringMode;
   focused?: Focused;

src/lib/Utils/PropsUtils.ts

@@ -1,17 +1,17 @@
-import { AllHTMLAttributes } from 'react';
+import { ChildAttributesItem, DispatchFunc } from '../types';
+import { getPageData, getPagesCount } from './PagingUtils';
+import { isRemoteSorting, sortColumns, sortData } from './SortUtils';
 
+import { AllHTMLAttributes } from 'react';
+import { ChildComponent } from '../Models/ChildComponent';
+import { Column } from '../models';
 import { ITableProps } from '../';
 import { SortingMode } from '../enums';
-import { Column } from '../models';
-import { ChildComponent } from '../Models/ChildComponent';
-import { ChildAttributesItem, DispatchFunc } from '../types';
-import { getValueByField } from './DataUtils';
 import { filterAndSearchData } from './FilterUtils';
 import { getGroupedData } from './GroupUtils';
-import { getPageData, getPagesCount } from './PagingUtils';
-import { getValidatedEditableCells } from './ReducerUtils';
-import { isRemoteSorting, sortColumns, sortData } from './SortUtils';
 import { getTreeData } from './TreeUtils';
+import { getValidatedEditableCells } from './ReducerUtils';
+import { getValueByField } from './DataUtils';
 
 export function extendProps<T = HTMLElement>(
   childElementAttributes: AllHTMLAttributes<T>,
@@ -79,6 +79,7 @@ const getDataWithoutPaging =  (props: ITableProps) => {
     groupsExpanded,
     treeGroupKeyField,
     treeGroupsExpanded,
+    extendedSort,
     rowKeyField,
     sort,
     sortingMode = SortingMode.None
@@ -91,6 +92,7 @@ const getDataWithoutPaging =  (props: ITableProps) => {
   if (!isRemoteSorting(sortingMode)) {
     resultData = sortData(columns, resultData, sort);
   }
+  resultData = extendedSort ? extendedSort(resultData, columns) : resultData;
 
   const groupedColumns: Column[] = groups ? columns.filter((c) => groups.some((g) => g.columnKey === c.key)) : [];
   resultData = groups ? getGroupedData(resultData, groups, groupedColumns, groupsExpanded) : resultData;