score:1
here you go, brief explanation in code sample. i setup 2 columns only, cause i am lazy, sorry.
fiddle: https://jsfiddle.net/u1wru0gb/1/
const data = [
{ id: 1, name: 'bruce' },
{ id: 3, name: 'martin' },
{ id: 2, name: 'andrew' },
];
/**
* nothing interesting, just render...
*/
function table({ data, sortbykey }) {
const renderrow = ({ id, name }, idx) => (
<tr key={idx}>
<td>{id}</td>
<td>{name}</td>
</tr>
)
return (
<table>
<tr>
<th onclick={sortbykey('id')}>id</th>
<th onclick={sortbykey('name')}>name</th>
</tr>
{ data.map(renderrow) }
</table>
);
}
class container extends react.component {
constructor(props) {
super(props);
this.state = {
sort: {
key: undefined,
// 0 - not ordering
// 1 - asc
// 2 - desc
order: 0,
},
};
this.sortbykey = this.sortbykey.bind(this);
}
sorteddata() {
const { key, order } = this.state.sort;
// only sort if key is provided & order != 0.
if (key && order) {
// comparison function for "asc" sorting.
function compare(a, b) {
if (a[key] < b[key]) return -1;
if (a[key] > b[key]) return 1;
return 0;
}
// attention! sort mutates array, clone first.
return [...this.props.data].sort((a, b) => {
// interesting part. sort in "asc" order. flip if want "desc" order!
return compare(a, b) * (order === 1 ? 1 : -1);
});
}
// return original data (order = 0)
return this.props.data;
}
sortbykey(key) {
return () => {
const sort = (this.state.sort.key === key)
// key matches, update order
? { key, order: (this.state.sort.order + 1) % 3 }
// key differs, start with "asc" order
: { key, order: 1 };
this.setstate({ sort });
}
}
render() {
return (
<table data={this.sorteddata()} sortbykey={this.sortbykey} />
);
}
}
reactdom.render(
<container data={data} />,
document.getelementbyid('container')
);
Source: stackoverflow.com
Related Query
- Sorting columns using asc/desc and default ordering
- Sorting By Asc and Desc date
- React.js Sorting asc and desc in same button
- How to remake this two lines, that sorting by asc and desc were implemented only on the react(without lodash)?
- How to sort the data in asc and desc order in table
- My first sample table using react-data-grid, columns are not rendered next to each other, instead they are overlapping over and over each other
- Showing a default value for a select control using react and material-ui control
- React/ Redux select filtering and sorting using selectors
- bundle.js still contains arrow function and default parameters after using babel pollyfill
- Sorting array of objects using name propery which contains alphabet and numbers using
- How to remove Object is possibly 'null' TS2531 warning when using PropTypes.InferProps and default parameters?
- Using Ant Design and Moment Js, I'm still unable to figure out how can we sort columns using Dates?
- React JS Filter Methods: Hiding table columns using array filters and state
- Sorting React table by clicking table headers for columns with numerical and string values
- How to sort table by asc and desc all field in React js
- Open default mail app using reactjs and fontawesome
- Sorting alphabetically a-z and z-a by using dropdown
- In react-table, I've combined basic sorting and resizing examples but want to suppress sorting while resizing columns
- React : How to sort data in asc and desc in ReactJS
- Using both props.children and default Parameters
- Want to populate dynamic data for rows and columns from state in Collapsible table using material UI for React.js
- Sorting Number Strings Using Lodash and React?
- Using Graphql and react, I am unable to access function from default export
- How to completely disable a TabPanel component (and grey out the text) and default to the 2nd tab in the index using React
- How to find repeated values of the column in table and perform sorting across columns
- Microsoft Graph Toolkit - How to loop through Get component result using React and default template
- Redirect for default case in React using Switch and BrowserRouter
- Using React-Table and Fetch GET JSON to create a dynamic table with columns
- What's the difference between "super()" and "super(props)" in React when using es6 classes?
- How do you test for the non-existence of an element using jest and react-testing-library?
More Query from same tag
- Why is my ipcMain returning an empty array after reading through a database?
- Pass a parameter to an event handler or callback in React
- Remove one field from mongoDB collection
- How to useMemo on a custom hook (or: how to only load content when on screen)
- How can I create multiple routes using React Router v4 (Sidebar)?
- Custom radio button border color
- React Redux way of handling enable-disable of DOM elements
- Redux mapDispatchToProps access action within array.map
- How to change the state of e.target.value with Redux/React?
- What does the error "Assertion (argc) == (4)' failed" mean?
- Storing and retrieving state from store
- How to change css property in react
- Why no parentheses on a function
- ReactJS call parent function from grandchild without using props
- Access to outer react component from referenced component
- Styling Material-UI Drawer component with Styled Components
- React apply function to single item in array
- Unable to change default value for react-select field
- How to pass in a state to the doc property in firebaseConnect
- How to pass an array of id's to delete using an endpoint rather than just one Id
- How to prevent re-rendering of components that have not changed?
- Reactjs material-UI TextField apply css properties
- Material UI Autocomplete component won't clear input when Informed state is reset
- Three.js: Keeping child below parent mesh
- React Router - How to do IndexRedirect, Redirect with dynamic routing
- refering a button to a specific li?
- How to use dark theme for section of the screen
- Auto refreshing when clicking a button
- How to mock a pdf Blob
- ReactJS SetState in Recursive $.getJson