Skip to content

Commit

Permalink
apply data change on dragend, working
Browse files Browse the repository at this point in the history
  • Loading branch information
Adrián committed Feb 7, 2019
1 parent 8903e24 commit f5bdeb1
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 5 deletions.
10 changes: 10 additions & 0 deletions src/MUIDataTable.js
Original file line number Diff line number Diff line change
Expand Up @@ -559,6 +559,14 @@ class MUIDataTable extends React.Component {
);
};

reorderColumns = columns => {
this.setState({columns});
}

reorderData = displayData => {
this.setState({displayData});
}

getSortDirection(column) {
return column.sortDirection === 'asc' ? 'ascending' : 'descending';
}
Expand Down Expand Up @@ -959,6 +967,8 @@ class MUIDataTable extends React.Component {
title={title}
toggleViewColumn={this.toggleViewColumn}
setTableAction={this.setTableAction}
reorderColumns={this.reorderColumns}
reorderData={this.reorderData}
/>
)}
<TableFilterList options={this.options} filterList={filterList} filterUpdate={this.filterUpdate} />
Expand Down
10 changes: 9 additions & 1 deletion src/components/TableToolbar.js
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,8 @@ class TableToolbar extends React.Component {
options,
classes,
columns,
reorderColumns,
reorderData,
filterData,
filterList,
filterUpdate,
Expand Down Expand Up @@ -200,7 +202,13 @@ class TableToolbar extends React.Component {
</IconButton>
}
content={
<TableViewCol data={data} columns={columns} options={options} onColumnUpdate={toggleViewColumn} />
<TableViewCol
data={data}
columns={columns}
options={options}
onColumnUpdate={toggleViewColumn}
onColumnReorder={reorderColumns}
onDataReorder={reorderData} />
}
/>
)}
Expand Down
24 changes: 20 additions & 4 deletions src/components/TableViewCol.js
Original file line number Diff line number Diff line change
Expand Up @@ -65,18 +65,35 @@ class TableViewCol extends React.Component {

state = {
columns : this.props.columns,
data : this.props.data,
};

handleColChange = index => {
this.props.onColumnUpdate(index);
};

onDragEnd = (result) => {
const columns = this.props.columns;

rearrangeColumns = (result) => {
const columns = this.state.columns;
const col = columns[result.source.index];
columns.splice(result.source.index,1);
columns.splice(result.destination.index,0,col);
this.setState({columns});
this.props.onColumnReorder(columns);
};

rearrangeData = (result) => {
const data = this.state.data;
data.map(d => {
const dt = d.data[result.source.index];
d.data.splice(result.source.index,1);
d.data.splice(result.destination.index,0,dt);
});
this.props.onDataReorder(data);
}

onDragEnd = (result) => {
this.rearrangeColumns(result);
this.rearrangeData(result);
}

render() {
Expand Down Expand Up @@ -111,7 +128,6 @@ class TableViewCol extends React.Component {
)}
>
<FormControlLabel

classes={{
root: classes.formControl,
label: classes.label,
Expand Down

0 comments on commit f5bdeb1

Please sign in to comment.