feat: groupBy

first cut

dist/frappe-datatable.cjs.js

@@ -899,8 +899,8 @@ class DataManager {
         this.prepareRows();
         this.prepareTreeRows();
         this.prepareRowView();
-
         this.prepareNumericColumns();
+        this.prepareGroupBy();
     }
 
     // computed property
@@ -1009,6 +1009,73 @@ class DataManager {
         });
     }
 
+    prepareGroupBy() {
+        if (!this.options.groupBy) return;
+
+        const groupKey = this.options.groupBy;
+        const column = this.columns.find(column => column.id === groupKey);
+
+        if (!column) {
+            throw new Error('Invalid column id provided in groupBy option');
+        }
+
+        const groups =
+            this.rows
+                // get values
+                .map(row => row[column.colIndex].content)
+                // remove duplicates
+                .filter((value, i, self) => {
+                    return self.indexOf(value) === i;
+                })
+                .sort();
+
+        const rowsByGroup = {};
+
+        for (const row of this.rows) {
+            const groupKey = row[column.colIndex].content;
+            rowsByGroup[groupKey] = rowsByGroup[groupKey] || [];
+            rowsByGroup[groupKey].push(row);
+        }
+
+        let rows = [];
+
+        const makeGroupRow = (groupValue) => {
+            const row = this.getColumns().map(c => ({ editable: false }));
+            const firstColumnIndex = this.getStandardColumnCount();
+            row[firstColumnIndex] = groupValue;
+            const meta = {
+                indent: 0
+            };
+
+            return this.prepareRow(row, meta);
+        };
+
+        for (let groupKey of groups) {
+            rowsByGroup[groupKey].forEach(row => {
+                row.meta.indent = 1;
+            });
+
+            rows = [
+                ...rows,
+                makeGroupRow(groupKey),
+                ...rowsByGroup[groupKey]
+            ];
+        }
+
+        this.rows = rows.map((row, i) => {
+            row.meta.rowIndex = i;
+
+            row.forEach(cell => {
+                cell.rowIndex = i;
+                cell.indent = row.meta.indent;
+            });
+
+            row[1].content = i + 1;
+
+            return row;
+        });
+    }
+
     prepareRows() {
         this.validateData(this.data);
 
@@ -2249,12 +2316,14 @@ class CellManager {
             const nextRow = this.datamanager.getRow(cell.rowIndex + 1);
             const addToggle = nextRow && nextRow.meta.indent > cell.indent;
 
+            const leftPadding = 1;
+
             // Add toggle and indent in the first column
             const firstColumnIndex = this.datamanager.getColumnIndexById('_rowIndex') + 1;
             if (firstColumnIndex === cell.colIndex) {
-                const padding = ((cell.indent || 0) + 1) * 1.5;
+                const padding = ((cell.indent || 0) + 1) * leftPadding;
                 const toggleHTML = addToggle ?
-                    `<span class="dt-tree-node__toggle" style="left: ${padding - 1.5}rem"></span>` : '';
+                    `<span class="dt-tree-node__toggle" style="left: ${padding - leftPadding}rem"></span>` : '';
                 contentHTML = `<span class="dt-tree-node" style="padding-left: ${padding}rem">
                     ${toggleHTML}${contentHTML}</span>`;
             }
@@ -2553,6 +2622,16 @@ class ColumnManager {
         $.on(this.header, 'keydown', '.dt-filter', debounce$1(handler, 300));
     }
 
+    applyDefaultSortOrder() {
+        // sort rows if any 1 column has a default sortOrder set
+        const columnsToSort = this.getColumns().filter(col => col.sortOrder !== 'none');
+
+        if (columnsToSort.length === 1) {
+            const column = columnsToSort[0];
+            this.sortColumn(column.colIndex, column.sortOrder);
+        }
+    }
+
     sortRows(colIndex, sortOrder) {
         return this.datamanager.sortRows(colIndex, sortOrder);
     }
@@ -3437,6 +3516,7 @@ var DEFAULT_OPTIONS = {
         desc: '↓',
         none: ''
     },
+    groupBy: '', // column id
     freezeMessage: '',
     getEditor: null,
     serialNoColumn: true,
@@ -3479,6 +3559,7 @@ class DataTable {
 
         if (this.options.data) {
             this.refresh();
+            this.columnmanager.applyDefaultSortOrder();
         }
     }
 
@@ -3650,7 +3731,7 @@ class DataTable {
 DataTable.instances = 0;
 
 var name = "frappe-datatable";
-var version = "0.0.9";
+var version = "0.0.10";
 var description = "A modern datatable library for the web";
 var main = "dist/frappe-datatable.cjs.js";
 var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","cy:server":"http-server -p 8989","cy:open":"cypress open","cy:run":"cypress run","test":"start-server-and-test cy:server http://localhost:8989 cy:run"};

dist/frappe-datatable.css

@@ -183,7 +183,7 @@
 		display: inline-block;
 		position: absolute;
 		font-size: 10px;
-		padding: 0 4px;
+		padding: 1px;
 		cursor: pointer;
 	}
 

dist/frappe-datatable.js

@@ -898,8 +898,8 @@ var DataTable = (function (Sortable,Clusterize) {
             this.prepareRows();
             this.prepareTreeRows();
             this.prepareRowView();
-
             this.prepareNumericColumns();
+            this.prepareGroupBy();
         }
 
         // computed property
@@ -1008,6 +1008,73 @@ var DataTable = (function (Sortable,Clusterize) {
             });
         }
 
+        prepareGroupBy() {
+            if (!this.options.groupBy) return;
+
+            const groupKey = this.options.groupBy;
+            const column = this.columns.find(column => column.id === groupKey);
+
+            if (!column) {
+                throw new Error('Invalid column id provided in groupBy option');
+            }
+
+            const groups =
+                this.rows
+                    // get values
+                    .map(row => row[column.colIndex].content)
+                    // remove duplicates
+                    .filter((value, i, self) => {
+                        return self.indexOf(value) === i;
+                    })
+                    .sort();
+
+            const rowsByGroup = {};
+
+            for (const row of this.rows) {
+                const groupKey = row[column.colIndex].content;
+                rowsByGroup[groupKey] = rowsByGroup[groupKey] || [];
+                rowsByGroup[groupKey].push(row);
+            }
+
+            let rows = [];
+
+            const makeGroupRow = (groupValue) => {
+                const row = this.getColumns().map(c => ({ editable: false }));
+                const firstColumnIndex = this.getStandardColumnCount();
+                row[firstColumnIndex] = groupValue;
+                const meta = {
+                    indent: 0
+                };
+
+                return this.prepareRow(row, meta);
+            };
+
+            for (let groupKey of groups) {
+                rowsByGroup[groupKey].forEach(row => {
+                    row.meta.indent = 1;
+                });
+
+                rows = [
+                    ...rows,
+                    makeGroupRow(groupKey),
+                    ...rowsByGroup[groupKey]
+                ];
+            }
+
+            this.rows = rows.map((row, i) => {
+                row.meta.rowIndex = i;
+
+                row.forEach(cell => {
+                    cell.rowIndex = i;
+                    cell.indent = row.meta.indent;
+                });
+
+                row[1].content = i + 1;
+
+                return row;
+            });
+        }
+
         prepareRows() {
             this.validateData(this.data);
 
@@ -2248,12 +2315,14 @@ var DataTable = (function (Sortable,Clusterize) {
                 const nextRow = this.datamanager.getRow(cell.rowIndex + 1);
                 const addToggle = nextRow && nextRow.meta.indent > cell.indent;
 
+                const leftPadding = 1;
+
                 // Add toggle and indent in the first column
                 const firstColumnIndex = this.datamanager.getColumnIndexById('_rowIndex') + 1;
                 if (firstColumnIndex === cell.colIndex) {
-                    const padding = ((cell.indent || 0) + 1) * 1.5;
+                    const padding = ((cell.indent || 0) + 1) * leftPadding;
                     const toggleHTML = addToggle ?
-                        `<span class="dt-tree-node__toggle" style="left: ${padding - 1.5}rem"></span>` : '';
+                        `<span class="dt-tree-node__toggle" style="left: ${padding - leftPadding}rem"></span>` : '';
                     contentHTML = `<span class="dt-tree-node" style="padding-left: ${padding}rem">
                     ${toggleHTML}${contentHTML}</span>`;
                 }
@@ -2552,6 +2621,16 @@ var DataTable = (function (Sortable,Clusterize) {
             $.on(this.header, 'keydown', '.dt-filter', debounce$1(handler, 300));
         }
 
+        applyDefaultSortOrder() {
+            // sort rows if any 1 column has a default sortOrder set
+            const columnsToSort = this.getColumns().filter(col => col.sortOrder !== 'none');
+
+            if (columnsToSort.length === 1) {
+                const column = columnsToSort[0];
+                this.sortColumn(column.colIndex, column.sortOrder);
+            }
+        }
+
         sortRows(colIndex, sortOrder) {
             return this.datamanager.sortRows(colIndex, sortOrder);
         }
@@ -3436,6 +3515,7 @@ var DataTable = (function (Sortable,Clusterize) {
             desc: '↓',
             none: ''
         },
+        groupBy: '', // column id
         freezeMessage: '',
         getEditor: null,
         serialNoColumn: true,
@@ -3478,6 +3558,7 @@ var DataTable = (function (Sortable,Clusterize) {
 
             if (this.options.data) {
                 this.refresh();
+                this.columnmanager.applyDefaultSortOrder();
             }
         }
 
@@ -3649,7 +3730,7 @@ var DataTable = (function (Sortable,Clusterize) {
     DataTable.instances = 0;
 
     var name = "frappe-datatable";
-    var version = "0.0.9";
+    var version = "0.0.10";
     var description = "A modern datatable library for the web";
     var main = "dist/frappe-datatable.cjs.js";
     var scripts = {"start":"yarn run dev","build":"rollup -c","production":"rollup -c --production","build:docs":"rollup -c --docs","dev":"rollup -c -w","cy:server":"http-server -p 8989","cy:open":"cypress open","cy:run":"cypress run","test":"start-server-and-test cy:server http://localhost:8989 cy:run"};

index.html

@@ -53,7 +53,7 @@
 					{ name: "Name" },
 					{ name: "Position" },
 					{ name: "Office" },
-					{ name: "Extn.", sortOrder: "desc" },
+					{ name: "Extn." },
 					{ name: "Start Date" },
 					{ name: "Salary" }
 				];
@@ -75,6 +75,8 @@
 					checkboxColumn: true,
 					serialNoColumn: true,
 					layout: 'fluid',
+					groupBy: 'Position',
+					treeView: true,
 					columns,
 					data,
 					inlineFilters: true,

src/cellmanager.js

@@ -774,12 +774,14 @@ export default class CellManager {
             const nextRow = this.datamanager.getRow(cell.rowIndex + 1);
             const addToggle = nextRow && nextRow.meta.indent > cell.indent;
 
+            const leftPadding = 1;
+
             // Add toggle and indent in the first column
             const firstColumnIndex = this.datamanager.getColumnIndexById('_rowIndex') + 1;
             if (firstColumnIndex === cell.colIndex) {
-                const padding = ((cell.indent || 0) + 1) * 1.5;
+                const padding = ((cell.indent || 0) + 1) * leftPadding;
                 const toggleHTML = addToggle ?
-                    `<span class="dt-tree-node__toggle" style="left: ${padding - 1.5}rem"></span>` : '';
+                    `<span class="dt-tree-node__toggle" style="left: ${padding - leftPadding}rem"></span>` : '';
                 contentHTML = `<span class="dt-tree-node" style="padding-left: ${padding}rem">
                     ${toggleHTML}${contentHTML}</span>`;
             }

src/datamanager.js

@@ -33,6 +33,7 @@ export default class DataManager {
         this.prepareTreeRows();
         this.prepareRowView();
         this.prepareNumericColumns();
+        this.prepareGroupBy();
     }
 
     // computed property
@@ -141,6 +142,73 @@ export default class DataManager {
         });
     }
 
+    prepareGroupBy() {
+        if (!this.options.groupBy) return;
+
+        const groupKey = this.options.groupBy;
+        const column = this.columns.find(column => column.id === groupKey);
+
+        if (!column) {
+            throw new Error('Invalid column id provided in groupBy option');
+        }
+
+        const groups =
+            this.rows
+                // get values
+                .map(row => row[column.colIndex].content)
+                // remove duplicates
+                .filter((value, i, self) => {
+                    return self.indexOf(value) === i;
+                })
+                .sort();
+
+        const rowsByGroup = {};
+
+        for (const row of this.rows) {
+            const groupKey = row[column.colIndex].content;
+            rowsByGroup[groupKey] = rowsByGroup[groupKey] || [];
+            rowsByGroup[groupKey].push(row);
+        }
+
+        let rows = [];
+
+        const makeGroupRow = (groupValue) => {
+            const row = this.getColumns().map(c => ({ editable: false }));
+            const firstColumnIndex = this.getStandardColumnCount();
+            row[firstColumnIndex] = groupValue;
+            const meta = {
+                indent: 0
+            };
+
+            return this.prepareRow(row, meta);
+        };
+
+        for (let groupKey of groups) {
+            rowsByGroup[groupKey].forEach(row => {
+                row.meta.indent = 1;
+            });
+
+            rows = [
+                ...rows,
+                makeGroupRow(groupKey),
+                ...rowsByGroup[groupKey]
+            ];
+        }
+
+        this.rows = rows.map((row, i) => {
+            row.meta.rowIndex = i;
+
+            row.forEach(cell => {
+                cell.rowIndex = i;
+                cell.indent = row.meta.indent;
+            });
+
+            row[1].content = i + 1;
+
+            return row;
+        });
+    }
+
     prepareRows() {
         this.validateData(this.data);
 

src/defaults.js

@@ -39,6 +39,7 @@ export default {
         desc: '↓',
         none: ''
     },
+    groupBy: '', // column id
     freezeMessage: '',
     getEditor: null,
     serialNoColumn: true,

src/style.css

@@ -193,7 +193,7 @@
 		display: inline-block;
 		position: absolute;
 		font-size: 10px;
-		padding: 0 4px;
+		padding: 1px;
 		cursor: pointer;
 	}