jingrow/datatable
1
0
Fork 0
Code Pull Requests Activity

Column Distribution based on ratio

Browse Source
This commit is contained in:
Faris Ansari 2018-03-05 17:08:38 +05:30
parent c9b04ddeb9
commit 25e2c6cc35
7 changed files with 221 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

65
dist/frappe-datatable.cjs.js vendored
View File

@ -898,7 +898,7 @@ class DataManager {
sortable: false, sortable: false,
focusable: false, focusable: false,
dropdown: false, dropdown: false,
width: 25 width: 32
}; };
this.columns.push(cell); this.columns.push(cell);
} }
@ -1344,6 +1344,10 @@ class DataManager {
return this.columns.find(col => col.colIndex === colIndex); return this.columns.find(col => col.colIndex === colIndex);
} }
getColumnById(id) {
return this.columns.find(col => col.id === id);
}
getRow(rowIndex) { getRow(rowIndex) {
rowIndex = +rowIndex; rowIndex = +rowIndex;
return this.rows[rowIndex]; return this.rows[rowIndex];
@ -2957,7 +2961,8 @@ class Style {
linkProperties(this, this.instance, [ linkProperties(this, this.instance, [
'options', 'datamanager', 'columnmanager', 'options', 'datamanager', 'columnmanager',
'header', 'bodyScrollable', 'getColumn' 'header', 'bodyScrollable', 'datatableWrapper',
'getColumn'
]); ]);
this.scopeClass = 'datatable-instance-' + instance.constructor.instances; this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
@ -3078,6 +3083,7 @@ class Style {
if (column.id === '_rowIndex') { if (column.id === '_rowIndex') {
naturalWidth = this.getRowIndexColumnWidth(naturalWidth); naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
column.width = naturalWidth;
} }
column.naturalWidth = naturalWidth; column.naturalWidth = naturalWidth;
@ -3085,15 +3091,50 @@ class Style {
} }
setupColumnWidth() { setupColumnWidth() {
this.datamanager.getColumns() if (this.options.layout === 'ratio') {
.map(column => { let totalWidth = $.style(this.datatableWrapper, 'width');
if (!column.width) {
column.width = column.naturalWidth; if (this.options.addSerialNoColumn) {
} const rowIndexColumn = this.datamanager.getColumnById('_rowIndex');
if (column.width < column.minWidth) { totalWidth = totalWidth - rowIndexColumn.width - 1;
column.width = column.minWidth; }
}
}); if (this.options.addCheckboxColumn) {
const rowIndexColumn = this.datamanager.getColumnById('_checkbox');
totalWidth = totalWidth - rowIndexColumn.width - 1;
}
const totalParts = this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') {
return 0;
}
if (!column.width) {
column.width = 1;
}
column.ratioWidth = parseInt(column.width, 10);
return column.ratioWidth;
})
.reduce((a, c) => a + c);
const onePart = totalWidth / totalParts;
this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') return;
column.width = Math.floor(onePart * column.ratioWidth) - 1;
});
} else {
this.datamanager.getColumns()
.map(column => {
if (!column.width) {
column.width = column.naturalWidth;
}
if (column.width < column.minWidth) {
column.width = column.minWidth;
}
});
}
} }
distributeRemainingWidth() { distributeRemainingWidth() {
@ -3295,7 +3336,7 @@ var DEFAULT_OPTIONS = {
addCheckboxColumn: false, addCheckboxColumn: false,
enableClusterize: true, enableClusterize: true,
enableLogs: false, enableLogs: false,
layout: 'fixed', // fixed, fluid layout: 'ratio', // fixed, fluid, ratio
noDataMessage: 'No Data', noDataMessage: 'No Data',
cellHeight: null, cellHeight: null,
enableInlineFilters: false enableInlineFilters: false

65
dist/frappe-datatable.js vendored
View File

@ -897,7 +897,7 @@ class DataManager {
sortable: false, sortable: false,
focusable: false, focusable: false,
dropdown: false, dropdown: false,
width: 25 width: 32
}; };
this.columns.push(cell); this.columns.push(cell);
} }
@ -1343,6 +1343,10 @@ class DataManager {
return this.columns.find(col => col.colIndex === colIndex); return this.columns.find(col => col.colIndex === colIndex);
} }
getColumnById(id) {
return this.columns.find(col => col.id === id);
}
getRow(rowIndex) { getRow(rowIndex) {
rowIndex = +rowIndex; rowIndex = +rowIndex;
return this.rows[rowIndex]; return this.rows[rowIndex];
@ -2956,7 +2960,8 @@ class Style {
linkProperties(this, this.instance, [ linkProperties(this, this.instance, [
'options', 'datamanager', 'columnmanager', 'options', 'datamanager', 'columnmanager',
'header', 'bodyScrollable', 'getColumn' 'header', 'bodyScrollable', 'datatableWrapper',
'getColumn'
]); ]);
this.scopeClass = 'datatable-instance-' + instance.constructor.instances; this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
@ -3077,6 +3082,7 @@ class Style {
if (column.id === '_rowIndex') { if (column.id === '_rowIndex') {
naturalWidth = this.getRowIndexColumnWidth(naturalWidth); naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
column.width = naturalWidth;
} }
column.naturalWidth = naturalWidth; column.naturalWidth = naturalWidth;
@ -3084,15 +3090,50 @@ class Style {
} }
setupColumnWidth() { setupColumnWidth() {
this.datamanager.getColumns() if (this.options.layout === 'ratio') {
.map(column => { let totalWidth = $.style(this.datatableWrapper, 'width');
if (!column.width) {
column.width = column.naturalWidth; if (this.options.addSerialNoColumn) {
} const rowIndexColumn = this.datamanager.getColumnById('_rowIndex');
if (column.width < column.minWidth) { totalWidth = totalWidth - rowIndexColumn.width - 1;
column.width = column.minWidth; }
}
}); if (this.options.addCheckboxColumn) {
const rowIndexColumn = this.datamanager.getColumnById('_checkbox');
totalWidth = totalWidth - rowIndexColumn.width - 1;
}
const totalParts = this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') {
return 0;
}
if (!column.width) {
column.width = 1;
}
column.ratioWidth = parseInt(column.width, 10);
return column.ratioWidth;
})
.reduce((a, c) => a + c);
const onePart = totalWidth / totalParts;
this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') return;
column.width = Math.floor(onePart * column.ratioWidth) - 1;
});
} else {
this.datamanager.getColumns()
.map(column => {
if (!column.width) {
column.width = column.naturalWidth;
}
if (column.width < column.minWidth) {
column.width = column.minWidth;
}
});
}
} }
distributeRemainingWidth() { distributeRemainingWidth() {
@ -3294,7 +3335,7 @@ var DEFAULT_OPTIONS = {
addCheckboxColumn: false, addCheckboxColumn: false,
enableClusterize: true, enableClusterize: true,
enableLogs: false, enableLogs: false,
layout: 'fixed', // fixed, fluid layout: 'ratio', // fixed, fluid, ratio
noDataMessage: 'No Data', noDataMessage: 'No Data',
cellHeight: null, cellHeight: null,
enableInlineFilters: false enableInlineFilters: false

65
docs/assets/frappe-datatable.js
View File

@ -897,7 +897,7 @@ class DataManager {
sortable: false, sortable: false,
focusable: false, focusable: false,
dropdown: false, dropdown: false,
width: 25 width: 32
}; };
this.columns.push(cell); this.columns.push(cell);
} }
@ -1343,6 +1343,10 @@ class DataManager {
return this.columns.find(col => col.colIndex === colIndex); return this.columns.find(col => col.colIndex === colIndex);
} }
getColumnById(id) {
return this.columns.find(col => col.id === id);
}
getRow(rowIndex) { getRow(rowIndex) {
rowIndex = +rowIndex; rowIndex = +rowIndex;
return this.rows[rowIndex]; return this.rows[rowIndex];
@ -2956,7 +2960,8 @@ class Style {
linkProperties(this, this.instance, [ linkProperties(this, this.instance, [
'options', 'datamanager', 'columnmanager', 'options', 'datamanager', 'columnmanager',
'header', 'bodyScrollable', 'getColumn' 'header', 'bodyScrollable', 'datatableWrapper',
'getColumn'
]); ]);
this.scopeClass = 'datatable-instance-' + instance.constructor.instances; this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
@ -3077,6 +3082,7 @@ class Style {
if (column.id === '_rowIndex') { if (column.id === '_rowIndex') {
naturalWidth = this.getRowIndexColumnWidth(naturalWidth); naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
column.width = naturalWidth;
} }
column.naturalWidth = naturalWidth; column.naturalWidth = naturalWidth;
@ -3084,15 +3090,50 @@ class Style {
} }
setupColumnWidth() { setupColumnWidth() {
this.datamanager.getColumns() if (this.options.layout === 'ratio') {
.map(column => { let totalWidth = $.style(this.datatableWrapper, 'width');
if (!column.width) {
column.width = column.naturalWidth; if (this.options.addSerialNoColumn) {
} const rowIndexColumn = this.datamanager.getColumnById('_rowIndex');
if (column.width < column.minWidth) { totalWidth = totalWidth - rowIndexColumn.width - 1;
column.width = column.minWidth; }
}
}); if (this.options.addCheckboxColumn) {
const rowIndexColumn = this.datamanager.getColumnById('_checkbox');
totalWidth = totalWidth - rowIndexColumn.width - 1;
}
const totalParts = this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') {
return 0;
}
if (!column.width) {
column.width = 1;
}
column.ratioWidth = parseInt(column.width, 10);
return column.ratioWidth;
})
.reduce((a, c) => a + c);
const onePart = totalWidth / totalParts;
this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') return;
column.width = Math.floor(onePart * column.ratioWidth) - 1;
});
} else {
this.datamanager.getColumns()
.map(column => {
if (!column.width) {
column.width = column.naturalWidth;
}
if (column.width < column.minWidth) {
column.width = column.minWidth;
}
});
}
} }
distributeRemainingWidth() { distributeRemainingWidth() {
@ -3294,7 +3335,7 @@ var DEFAULT_OPTIONS = {
addCheckboxColumn: false, addCheckboxColumn: false,
enableClusterize: true, enableClusterize: true,
enableLogs: false, enableLogs: false,
layout: 'fixed', // fixed, fluid layout: 'ratio', // fixed, fluid, ratio
noDataMessage: 'No Data', noDataMessage: 'No Data',
cellHeight: null, cellHeight: null,
enableInlineFilters: false enableInlineFilters: false

10
index.html
View File

File diff suppressed because one or more lines are too long

6
src/datamanager.js
View File

@ -59,7 +59,7 @@ export default class DataManager {
sortable: false, sortable: false,
focusable: false, focusable: false,
dropdown: false, dropdown: false,
width: 25 width: 32
}; };
this.columns.push(cell); this.columns.push(cell);
} }
@ -505,6 +505,10 @@ export default class DataManager {
return this.columns.find(col => col.colIndex === colIndex); return this.columns.find(col => col.colIndex === colIndex);
} }
getColumnById(id) {
return this.columns.find(col => col.id === id);
}
getRow(rowIndex) { getRow(rowIndex) {
rowIndex = +rowIndex; rowIndex = +rowIndex;
return this.rows[rowIndex]; return this.rows[rowIndex];

2
src/defaults.js
View File

@ -44,7 +44,7 @@ export default {
addCheckboxColumn: false, addCheckboxColumn: false,
enableClusterize: true, enableClusterize: true,
enableLogs: false, enableLogs: false,
layout: 'fixed', // fixed, fluid layout: 'ratio', // fixed, fluid, ratio
noDataMessage: 'No Data', noDataMessage: 'No Data',
cellHeight: null, cellHeight: null,
enableInlineFilters: false enableInlineFilters: false

57
src/style.js
View File

@ -11,7 +11,8 @@ export default class Style {
linkProperties(this, this.instance, [ linkProperties(this, this.instance, [
'options', 'datamanager', 'columnmanager', 'options', 'datamanager', 'columnmanager',
'header', 'bodyScrollable', 'getColumn' 'header', 'bodyScrollable', 'datatableWrapper',
'getColumn'
]); ]);
this.scopeClass = 'datatable-instance-' + instance.constructor.instances; this.scopeClass = 'datatable-instance-' + instance.constructor.instances;
@ -132,6 +133,7 @@ export default class Style {
if (column.id === '_rowIndex') { if (column.id === '_rowIndex') {
naturalWidth = this.getRowIndexColumnWidth(naturalWidth); naturalWidth = this.getRowIndexColumnWidth(naturalWidth);
column.width = naturalWidth;
} }
column.naturalWidth = naturalWidth; column.naturalWidth = naturalWidth;
@ -139,15 +141,50 @@ export default class Style {
} }
setupColumnWidth() { setupColumnWidth() {
this.datamanager.getColumns() if (this.options.layout === 'ratio') {
.map(column => { let totalWidth = $.style(this.datatableWrapper, 'width');
if (!column.width) {
column.width = column.naturalWidth; if (this.options.addSerialNoColumn) {
} const rowIndexColumn = this.datamanager.getColumnById('_rowIndex');
if (column.width < column.minWidth) { totalWidth = totalWidth - rowIndexColumn.width - 1;
column.width = column.minWidth; }
}
}); if (this.options.addCheckboxColumn) {
const rowIndexColumn = this.datamanager.getColumnById('_checkbox');
totalWidth = totalWidth - rowIndexColumn.width - 1;
}
const totalParts = this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') {
return 0;
}
if (!column.width) {
column.width = 1;
}
column.ratioWidth = parseInt(column.width, 10);
return column.ratioWidth;
})
.reduce((a, c) => a + c);
const onePart = totalWidth / totalParts;
this.datamanager.getColumns()
.map(column => {
if (column.id === '_rowIndex' || column.id === '_checkbox') return;
column.width = Math.floor(onePart * column.ratioWidth) - 1;
});
} else {
this.datamanager.getColumns()
.map(column => {
if (!column.width) {
column.width = column.naturalWidth;
}
if (column.width < column.minWidth) {
column.width = column.minWidth;
}
});
}
} }
distributeRemainingWidth() { distributeRemainingWidth() {