使用 React-Table 选择多行? (Shift + 单击)
Selecting multiple rows with React-Table? (Shift + Click)
有谁知道使用 React-Table 来 select 多行的方法。假设我们希望单击一行中的一个单元格,然后按 SHIFT,然后 select 另一行,也许用 CSS 对 selected 行进行颜色编码?这可能吗?
我找到了一种方法。如果您有任何问题,请告诉我。基本上只需要自己实现。
state = {
selected: null,
selectedRows: [],
}
previousRow = null;
handleClick = (state, rowInfo) => {
if (rowInfo) {
return {
onClick: (e) => {
let selectedRows = [];
// if shift key is being pressed upon click and there is a row that was previously selected, grab all rows inbetween including both previous and current clicked rows
if (e.shiftKey && this.previousRow) {
// if previous row is above current row in table
if (this.previousRow.index < rowInfo.index) {
for (let i = this.previousRow.index; i <= rowInfo.index; i++) {
selectedRows.push(state.sortedData[i]);
}
// or the opposite
} else {
for (let i = rowInfo.index; i <= this.previousRow.index; i++) {
selectedRows.push(state.sortedData[i]);
}
}
} else {
// add _index field so this entry is same as others from sortedData
rowInfo._index = rowInfo.index;
selectedRows.push(rowInfo);
this.previousRow = rowInfo;
}
this.setState({ selected: rowInfo.index, selectedRows })
},
style: {
// check index of rows in selectedRows against all rowInfo's indices, to match them up, and return true/highlight row, if there is a index from selectedRows in rowInfo/the table data
background: this.state.selectedRows.some((e) => e._index === rowInfo.index) && '#9bdfff',
}
}
} else {
return {}
}
有谁知道使用 React-Table 来 select 多行的方法。假设我们希望单击一行中的一个单元格,然后按 SHIFT,然后 select 另一行,也许用 CSS 对 selected 行进行颜色编码?这可能吗?
我找到了一种方法。如果您有任何问题,请告诉我。基本上只需要自己实现。
state = {
selected: null,
selectedRows: [],
}
previousRow = null;
handleClick = (state, rowInfo) => {
if (rowInfo) {
return {
onClick: (e) => {
let selectedRows = [];
// if shift key is being pressed upon click and there is a row that was previously selected, grab all rows inbetween including both previous and current clicked rows
if (e.shiftKey && this.previousRow) {
// if previous row is above current row in table
if (this.previousRow.index < rowInfo.index) {
for (let i = this.previousRow.index; i <= rowInfo.index; i++) {
selectedRows.push(state.sortedData[i]);
}
// or the opposite
} else {
for (let i = rowInfo.index; i <= this.previousRow.index; i++) {
selectedRows.push(state.sortedData[i]);
}
}
} else {
// add _index field so this entry is same as others from sortedData
rowInfo._index = rowInfo.index;
selectedRows.push(rowInfo);
this.previousRow = rowInfo;
}
this.setState({ selected: rowInfo.index, selectedRows })
},
style: {
// check index of rows in selectedRows against all rowInfo's indices, to match them up, and return true/highlight row, if there is a index from selectedRows in rowInfo/the table data
background: this.state.selectedRows.some((e) => e._index === rowInfo.index) && '#9bdfff',
}
}
} else {
return {}
}