false,
selectableRowsHideCheckboxes,
+ setHeadCellRef,
...otherProps
} = this.props;
let fixedHeaderClasses;
@@ -114,6 +115,13 @@ class TableSelectCell extends React.Component {
[classes.hide]: isHeaderCell && !expandableRowsHeader,
});
+ let refProp = {};
+ if (setHeadCellRef) {
+ refProp.ref = el => {
+ setHeadCellRef(0, 0, el);
+ };
+ }
+
const renderCheckBox = () => {
if (isHeaderCell && (selectableOn !== 'multiple' || selectableRowsHeader === false)) {
// only display the header checkbox for multiple selection.
@@ -134,7 +142,7 @@ class TableSelectCell extends React.Component {
};
return (
-
+
{expandableOn && (
diff --git a/src/components/TableToolbar.js b/src/components/TableToolbar.js
index d2d24f7e9..b5b3b86ce 100644
--- a/src/components/TableToolbar.js
+++ b/src/components/TableToolbar.js
@@ -119,9 +119,26 @@ class TableToolbar extends React.Component {
}
handleCSVDownload = () => {
- const { data, displayData, columns, options } = this.props;
- let dataToDownload = cloneDeep(data);
- let columnsToDownload = columns;
+ const { data, displayData, columns, options, colOrder } = this.props;
+ let dataToDownload = []; //cloneDeep(data);
+ let columnsToDownload = [];
+ let columnOrder = Array.isArray(colOrder) ? columnOrder.slice(0) : [];
+
+ if (columnOrder.length === 0) {
+ columnOrder = columns.map((item, idx) => idx);
+ }
+
+ data.forEach(row => {
+ let newRow = { index: row.index, data: [] };
+ columnOrder.forEach(idx => {
+ newRow.data.push(row.data[idx]);
+ });
+ dataToDownload.push(newRow);
+ });
+
+ columnOrder.forEach(idx => {
+ columnsToDownload.push(columns[idx]);
+ });
if (options.downloadOptions && options.downloadOptions.filterOptions) {
// check rows first:
diff --git a/src/hooks/useColumnDrop.js b/src/hooks/useColumnDrop.js
new file mode 100644
index 000000000..b9bef1251
--- /dev/null
+++ b/src/hooks/useColumnDrop.js
@@ -0,0 +1,139 @@
+/*
+ This hook handles the dragging and dropping effects that occur for columns.
+*/
+
+import { useDrop } from 'react-dnd';
+
+const getColModel = (headCellRefs, columnOrder) => {
+ let colModel = [];
+
+ let ii = 0,
+ parentOffsetLeft = 0,
+ offsetParent = headCellRefs[0].offsetParent;
+ while (offsetParent) {
+ parentOffsetLeft = parentOffsetLeft + (offsetParent.offsetLeft || 0);
+ offsetParent = offsetParent.offsetParent;
+ ii++;
+ if (ii > 1000) {
+ console.warn('Table nested within 1000 divs. Maybe an error.');
+ break;
+ }
+ }
+
+ colModel[0] = {
+ left: parentOffsetLeft + headCellRefs[0].offsetLeft,
+ width: headCellRefs[0].offsetWidth,
+ columnIndex: null,
+ ref: headCellRefs[0],
+ };
+
+ columnOrder.forEach((colIdx, idx) => {
+ let col = headCellRefs[colIdx + 1];
+ let cmIndx = colModel.length - 1;
+ colModel.push({
+ left: colModel[cmIndx].left + colModel[cmIndx].width,
+ width: col.offsetWidth,
+ columnIndex: colIdx,
+ ref: col,
+ });
+ });
+
+ return colModel;
+};
+
+const reorderColumns = (prevColumnOrder, columnIndex, newPosition) => {
+ let columnOrder = prevColumnOrder.slice();
+ let srcIndex = columnOrder.indexOf(columnIndex);
+ let targetIndex = columnOrder.indexOf(newPosition);
+
+ if (srcIndex !== -1 && targetIndex !== -1) {
+ let newItem = columnOrder[srcIndex];
+ columnOrder = [...columnOrder.slice(0, srcIndex), ...columnOrder.slice(srcIndex + 1)];
+ columnOrder = [...columnOrder.slice(0, targetIndex), newItem, ...columnOrder.slice(targetIndex)];
+ }
+ return columnOrder;
+};
+
+const useColumnDrop = opts => {
+ const { index, headCellRefs, updateColumnOrder, columnOrder, transitionTime = 300, tableRef, timers } = opts;
+
+ const [{ isOver, canDrop }, drop] = useDrop({
+ accept: 'HEADER',
+ drop: opts.drop,
+ hover: (item, mon) => {
+ let hoverIdx = mon.getItem().colIndex;
+
+ if (hoverIdx !== index) {
+ let reorderedCols = reorderColumns(columnOrder, mon.getItem().colIndex, index);
+ let newColModel = getColModel(headCellRefs, reorderedCols);
+
+ let newX = mon.getClientOffset().x;
+ let modelIdx = -1;
+ for (let ii = 0; ii < newColModel.length; ii++) {
+ if (newX > newColModel[ii].left && newX < newColModel[ii].left + newColModel[ii].width) {
+ modelIdx = newColModel[ii].columnIndex;
+ break;
+ }
+ }
+
+ if (modelIdx === mon.getItem().colIndex) {
+ clearTimeout(timers.columnShift);
+
+ let curColModel = getColModel(headCellRefs, columnOrder);
+
+ let transitions = [];
+ newColModel.forEach(item => {
+ transitions[item.columnIndex] = item.left;
+ });
+ curColModel.forEach(item => {
+ transitions[item.columnIndex] = transitions[item.columnIndex] - item.left;
+ });
+
+ for (let idx = 1; idx < columnOrder.length; idx++) {
+ headCellRefs[idx].style.transition = '280ms';
+ headCellRefs[idx].style.transform = 'translateX(' + transitions[idx - 1] + 'px)';
+ }
+
+ let allElms = [];
+ let dividers = [];
+ for (let ii = 0; ii < columnOrder.length; ii++) {
+ let elms = tableRef ? tableRef.querySelectorAll('[data-colindex="' + ii + '"]') : [];
+ for (let jj = 0; jj < elms.length; jj++) {
+ elms[jj].style.transition = transitionTime + 'ms';
+ elms[jj].style.transform = 'translateX(' + transitions[ii] + 'px)';
+ allElms.push(elms[jj]);
+ }
+
+ let divider = tableRef ? tableRef.querySelectorAll('[data-divider-index="' + (ii + 1) + '"]') : [];
+ for (let jj = 0; jj < divider.length; jj++) {
+ divider[jj].style.transition = transitionTime + 'ms';
+ divider[jj].style.transform = 'translateX(' + transitions[columnOrder[ii]] + 'px)';
+ dividers.push(divider[jj]);
+ }
+ }
+
+ let newColIndex = mon.getItem().colIndex;
+ timers.columnShift = setTimeout(() => {
+ allElms.forEach(item => {
+ item.style.transition = '0s';
+ item.style.transform = 'translateX(0)';
+ });
+ dividers.forEach(item => {
+ item.style.transition = '0s';
+ item.style.transform = 'translateX(0)';
+ });
+ updateColumnOrder(reorderedCols, newColIndex, index);
+ }, transitionTime);
+ }
+ }
+ },
+ collect: mon => ({
+ isOver: !!mon.isOver(),
+ canDrop: !!mon.canDrop(),
+ }),
+ });
+
+ return [drop];
+};
+
+export default useColumnDrop;
diff --git a/test/MUIDataTable.test.js b/test/MUIDataTable.test.js
index 076bb6485..dacba7ec5 100644
--- a/test/MUIDataTable.test.js
+++ b/test/MUIDataTable.test.js
@@ -1938,4 +1938,81 @@ describe('', function() {
expect(getCollatorComparator()('testStringA', 'testStringB')).to.equal(-1);
});
});
+
+ it('should correctly execute customBodyRender methods based on filtering and data', () => {
+ let filteredData = [];
+ let customBodyRenderCb = spy();
+ let customBodyRenderLiteCb = spy();
+ let customBodyRenderNoFilterCb = spy();
+ const options = {
+ rowsPerPage: 5,
+ rowsPerPageOptions: [5],
+ };
+
+ const data = [
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+ ['a', 'b'],
+ ];
+
+ const columns = [
+ {
+ name: 'firstName',
+ label: 'First Name',
+ options: {
+ customBodyRender: () => {
+ customBodyRenderCb();
+ return '';
+ },
+ },
+ },
+ {
+ name: 'lastName',
+ label: 'Last Name',
+ options: {
+ customBodyRenderLite: () => {
+ customBodyRenderLiteCb();
+ return '';
+ },
+ },
+ },
+ {
+ name: 'phone',
+ label: 'Phone',
+ options: {
+ filter: false,
+ customBodyRender: () => {
+ customBodyRenderNoFilterCb();
+ return '';
+ },
+ },
+ },
+ ];
+
+ const fullWrapper = mount();
+ fullWrapper.unmount();
+
+ // lite only gets executed for the 5 entries shown
+ assert.strictEqual(customBodyRenderLiteCb.callCount, 5);
+
+ // regular gets executed 15 times for filtering, and 15 more times for display
+ assert.strictEqual(customBodyRenderCb.callCount, 30);
+
+ // regular with no filtering gets executed 15 times for display
+ assert.strictEqual(customBodyRenderNoFilterCb.callCount, 15);
+ });
});
diff --git a/test/MUIDataTableCustomComponents.test.js b/test/MUIDataTableCustomComponents.test.js
index 66494f3d7..24994784c 100644
--- a/test/MUIDataTableCustomComponents.test.js
+++ b/test/MUIDataTableCustomComponents.test.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
import { assert } from 'chai';
import MUIDataTable from '../src/MUIDataTable';
import Chip from '@material-ui/core/Chip';
@@ -41,7 +41,7 @@ describe(' with custom components', function() {
});
it('should render a table with custom Chip in TableFilterList', () => {
- const shallowWrapper = shallow(
+ const wrapper = mount(
with custom components', function() {
}}
/>,
);
- const customFilterList = shallowWrapper.dive().find(CustomFilterList);
+ const customFilterList = wrapper.find(CustomFilterList);
assert.lengthOf(customFilterList, 1);
const customChip = customFilterList
- .dive()
- .dive()
- .dive()
.find(CustomChip);
assert.lengthOf(customChip, 1);
});
diff --git a/test/MUIDataTableHead.test.js b/test/MUIDataTableHead.test.js
index bdb486846..a8a74aa92 100644
--- a/test/MUIDataTableHead.test.js
+++ b/test/MUIDataTableHead.test.js
@@ -6,6 +6,8 @@ import TableHead from '../src/components/TableHead';
import TableHeadCell from '../src/components/TableHeadCell';
import Checkbox from '@material-ui/core/Checkbox';
import Tooltip from '@material-ui/core/Tooltip';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
describe('', function() {
let columns;
@@ -13,14 +15,14 @@ describe('', function() {
before(() => {
columns = [
- { name: 'First Name', label: 'First Name', display: 'true', sort: null },
+ { name: 'First Name', label: 'First Name', display: 'true', sort: true },
{ name: 'Company', label: 'Company', display: 'true', sort: null },
{ name: 'City', label: 'City Label', display: 'true', sort: null },
{
name: 'State',
label: 'State',
display: 'true',
- options: { fixedHeaderOptions: { xAxis: true, yAxis: true } },
+ options: { fixedHeaderOptions: { xAxis: true, yAxis: true }, selectableRows: 'multiple' },
customHeadRender: columnMeta => {columnMeta.name + 's'},
sort: null,
},
@@ -32,16 +34,19 @@ describe('', function() {
it('should render a table head', () => {
const options = {};
const toggleSort = () => {};
-
+console.dir(columns);
const mountWrapper = mount(
- {}}
- handleHeadUpdateRef={handleHeadUpdateRef}
- toggleSort={toggleSort}
- />,
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ toggleSort={toggleSort}
+ />
+ ,
);
+ console.log(mountWrapper.html());
const actualResult = mountWrapper.find(TableHeadCell);
assert.strictEqual(actualResult.length, 4);
});
@@ -51,13 +56,15 @@ describe('', function() {
const toggleSort = () => {};
const mountWrapper = mount(
- {}}
- handleHeadUpdateRef={handleHeadUpdateRef}
- toggleSort={toggleSort}
- />,
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ toggleSort={toggleSort}
+ />
+ ,
);
const labels = mountWrapper.find(TableHeadCell).map(n => n.text());
assert.deepEqual(labels, ['First Name', 'Company', 'City Label', 'States']);
@@ -69,13 +76,15 @@ describe('', function() {
const newColumns = columns.map(column => ({ ...column, display: false }));
const mountWrapper = mount(
- {}}
- handleHeadUpdateRef={handleHeadUpdateRef}
- toggleSort={toggleSort}
- />,
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ toggleSort={toggleSort}
+ />
+ ,
);
const actualResult = mountWrapper.find(TableHeadCell);
assert.strictEqual(actualResult.length, 0);
@@ -85,42 +94,43 @@ describe('', function() {
const options = { sort: true };
const toggleSort = spy();
- const shallowWrapper = shallow(
- {}}
- handleHeadUpdateRef={handleHeadUpdateRef}
- toggleSort={toggleSort}
- />,
- ).dive();
+ const wrapper = mount(
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ toggleSort={toggleSort}
+ />
+ ,
+ );
- const instance = shallowWrapper.instance();
- instance.handleToggleColumn(2);
- shallowWrapper.update();
+ const instance = wrapper.find('th span').at(0);
+ instance.simulate('click');
assert.strictEqual(toggleSort.callCount, 1);
});
it('should trigger selectRowUpdate prop callback and selectChecked state update when calling method handleRowSelect', () => {
- const options = { sort: true, selectableRows: true };
+ const options = { sort: true, selectableRows: 'multiple' };
const rowSelectUpdate = spy();
- const shallowWrapper = shallow(
- {}}
- handleHeadUpdateRef={handleHeadUpdateRef}
- selectRowUpdate={rowSelectUpdate}
- />,
- ).dive();
-
- const instance = shallowWrapper.instance();
- instance.handleRowSelect(2);
- shallowWrapper.update();
-
- let state = shallowWrapper.state();
+ const wrapper = mount(
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ selectRowUpdate={rowSelectUpdate}
+ />
+ ,
+ );
+
+ const instance = wrapper.find('input[type="checkbox"]');
+ instance.simulate('change', { target: { value: 'checked' } });
+
assert.strictEqual(rowSelectUpdate.callCount, 1);
});
@@ -128,7 +138,14 @@ describe('', function() {
const options = { selectableRows: 'multiple' };
const mountWrapper = mount(
- {}} handleHeadUpdateRef={handleHeadUpdateRef} />,
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ />
+ ,
);
const actualResult = mountWrapper.find(Checkbox);
@@ -139,7 +156,14 @@ describe('', function() {
const options = { selectableRows: 'single' };
const mountWrapper = mount(
- {}} handleHeadUpdateRef={handleHeadUpdateRef} />,
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ />
+ ,
);
const actualResult = mountWrapper.find(Checkbox);
@@ -150,7 +174,14 @@ describe('', function() {
const options = { selectableRows: 'none' };
const mountWrapper = mount(
- {}} handleHeadUpdateRef={handleHeadUpdateRef} />,
+
+ {}}
+ handleHeadUpdateRef={handleHeadUpdateRef}
+ />
+ ,
);
const actualResult = mountWrapper.find(Checkbox);
diff --git a/test/MUIDataTableHeadCell.test.js b/test/MUIDataTableHeadCell.test.js
index 340f7de96..2d9889ee3 100644
--- a/test/MUIDataTableHeadCell.test.js
+++ b/test/MUIDataTableHeadCell.test.js
@@ -7,6 +7,8 @@ import TableHeadCell from '../src/components/TableHeadCell';
import TableCell from '@material-ui/core/TableCell';
import TableSortLabel from '@material-ui/core/TableSortLabel';
import HelpIcon from '@material-ui/icons/Help';
+import { DndProvider } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
describe('', function() {
let classes;
@@ -25,15 +27,17 @@ describe('', function() {
const toggleExpandRow = () => {};
const mountWrapper = mount(
-
- some content
- ,
+
+
+ some content
+
+ ,
);
const props = mountWrapper.find(TableCell).props();
@@ -48,13 +52,15 @@ describe('', function() {
const options = { sort: true, textLabels: getTextLabels() };
const toggleSort = () => {};
- const shallowWrapper = shallow(
-
- some content
- ,
- ).dive();
+ const wrapper = mount(
+
+
+ some content
+
+ ,
+ );
- const actualResult = shallowWrapper.find(TableSortLabel);
+ const actualResult = wrapper.find(TableSortLabel);
assert.strictEqual(actualResult.length, 1);
});
@@ -63,9 +69,11 @@ describe('', function() {
const toggleSort = () => {};
const shallowWrapper = shallow(
-
- some content
- ,
+
+
+ some content
+
+ ,
);
const actualResult = shallowWrapper.find(TableSortLabel);
@@ -75,13 +83,15 @@ describe('', function() {
it('should render a table help icon when hint provided', () => {
const options = { sort: true, textLabels: getTextLabels() };
- const shallowWrapper = shallow(
-
- some content
- ,
- ).dive();
+ const wrapper = mount(
+
+
+ some content
+
+ ,
+ );
- const actualResult = shallowWrapper.find(HelpIcon);
+ const actualResult = wrapper.find(HelpIcon);
assert.strictEqual(actualResult.length, 1);
});
@@ -89,9 +99,11 @@ describe('', function() {
const options = { sort: true, textLabels: getTextLabels() };
const shallowWrapper = shallow(
-
- some content
- ,
+
+
+ some content
+
+ ,
).dive();
const actualResult = shallowWrapper.find(HelpIcon);
@@ -102,16 +114,26 @@ describe('', function() {
const options = { sort: true, textLabels: getTextLabels() };
const toggleSort = spy();
- const shallowWrapper = shallow(
-
- some content
- ,
- ).dive();
-
- const instance = shallowWrapper.instance();
+ const wrapper = mount(
+
+
+ some content
+
+ ,
+ );
+ const instance = wrapper
+ .find('td')
+ .at(0)
+ .childAt(0);
const event = { target: { value: 'All' } };
- instance.handleSortClick();
+ instance.simulate('click');
assert.strictEqual(toggleSort.callCount, 1);
});
});
diff --git a/test/TableResize.test.js b/test/TableResize.test.js
index b1a09d986..74e471099 100644
--- a/test/TableResize.test.js
+++ b/test/TableResize.test.js
@@ -46,6 +46,6 @@ describe('', function() {
colCoordCount++;
}
- assert.strictEqual(colCoordCount, 4);
+ assert.strictEqual(colCoordCount, 5);
});
});