I need to convert the below code to normal class component without hooks, can anyone help me with this, here is the link which i am referring to https://jbetancur.github.io/react-data-table-component/?path=/story/filtering--example-1 I need to do filtering without using hooks as i am using only class component. Below are the versions I am using:- "react-data-table-component": "^6.9.3", "react": "^16.12.0",
2 Answers
You can filter in the component itself
<DataTable
pagination="true"
columns={columns}
data={leaderBoardList.filter((item) => {
if (searchTerm === "") {
return item;
} else if (
item.name.toLowerCase().includes(searchTerm.toLowerCase())
) {
return item;
}
})}
/>
Comments
I think This is what you are looking for...
class BasicTable extends React.PureComponent {
constructor(props) {
super(props);
this.state = { filterText: "", resetPaginationToggle: false };
this.filteredItems = fakeUsers.filter(
(item) =>
item.name && item.name.toLowerCase().includes(filterText.toLowerCase())
);
}
handleClear = () => {
const { resetPaginationToggle, filterText } = this.state;
if (this.state.filterText) {
this.setState({
resetPaginationToggle: !resetPaginationToggle,
filterText: ""
});
}
};
getSubHeaderComponent = () => {
return (
<FilterComponent
onFilter={(e) => {
let newFilterText = e.target.value;
this.filteredItems = fakeUsers.filter(
(item) =>
item.name &&
item.name.toLowerCase().includes(newFilterText.toLowerCase())
);
this.setState({ filterText: newFilterText });
}}
onClear={this.handleClear}
filterText={this.state.filterText}
/>
);
};
render() {
return (
<DataTable
title="Contact List"
columns={columns}
data={this.filteredItems}
pagination
paginationResetDefaultPage={this.state.resetPaginationToggle} // optionally, a hook to reset pagination to page 1
subHeader
subHeaderComponent={this.getSubHeaderComponent()}
selectableRows
persistTableHead
/>
);
}
}
9 Comments
Kalyan A
It is not working i added FilterComponent constant also but not able to see search box option
Kalyan A
one small correction {this.getSubHeaderCompnent()} now filterComponent is coming
Harsh kurra
Fixed that, if it is working fine then you can mark the answer correct and I hope you get enough inputs to convert other components from functional to class-based
Kalyan A
I have got inputs for converting functional to class-based,thank you.Can you send me some reference from which I can convert functional to class-based easily ?
Harsh kurra
@Kalyan In order to convert Hooks based component to class-based you need to understand some Hooks like useState, useEffect and their counterpart lifecycle method or constructs in class-based component. I still not understand why do you need functional to class-based conversion, React itself encouraging to move to functional based from class based and preferring to write new component as functional comp instead of class one in your old application
|