这是具有Node函数的checkboxTable组件，在这里我试图使用toggleAll库的react-table函数来checkboxTable复选框内容。
selectAll import checkboxHOC from "react-table/lib/hoc/selectTable";
const CheckboxTable = checkboxHOC(ReactTable);
export const DataTable = (props: any) => {
console.log("finalcolumns", props.columns);
return (
<CheckboxTable
data={props.data}
columns={props.columns}
filterable={true}
className=" -highlight left-padding"
defaultPageSize={10}
SubComponent={props.subComponent}
defaultFilterMethod={(filter, row, column) => {
const id = filter.pivotId || filter.id;
return row[id] !== undefined
? String(row[id])
.toUpperCase()
.includes(filter.value.toUpperCase())
: true;
}}
/>
);
};
toggleAll = () => {
/*
'toggleAll' is a tricky concept with any filterable table
do you just select ALL the records that are in your data?
OR
do you only select ALL the records that are in the current filtered data?
The latter makes more sense because 'selection' is a visual thing for the user.
This is especially true if you are going to implement a set of external functions
that act on the selected information (you would not want to DELETE the wrong thing!).
So, to that end, access to the internals of ReactTable are required to get what is
currently visible in the table (either on the current page or any other page).
The HOC provides a method call 'getWrappedInstance' to get a ref to the wrapped
ReactTable and then get the internal state and the 'sortedData'.
That can then be iterated over to get all the currently visible records and set
the selection state.
*/
const newselectAll = selectAll ? false : true;
const selection:any = [];
if (newselectAll) {
// we need to get at the internals of ReactTable
const wrappedInstance = `**this.checkboxTable**`.getWrappedInstance();
// the 'sortedData' property contains the currently accessible records based on the filter and sort
const currentRecords = wrappedInstance.getResolvedState().sortedData;
// we just push all the IDs onto the selection array
currentRecords.forEach(item => {
selection.push(item._original._id);
});
}
this.setState({ selectAll, selection });
};
我需要在没有此功能的功能组件中使用它，但是它表示未定义功能，例如this.checkboxTable库中的功能。