Filter table data by date with Reactjs

Question

I am new to reactJs and trying to implement the below idea -

• A data table where data can be filtered by day of the month.

• A calendar which will show only days of a month in a row (pagination/tab like view):

  

• Selecting each days will filter the data of the table on the page

• Next month can be selected by clicking on the month name appears on the end of the row and data will be filtered accordingly.

what I have tried -

• Use a react-bootstrap paginator
• Use a data table

I am finding it hard to figure our how can I implement the calendar and connect it as a filter with the data table. BTW, data of the table can be found from any database or some example data.

I hope I made it as clear as possible. Feel free to tell if I need to add something.

Answer 1

You can do 2 several components, for example Filters and Data, first will store your list of possible days, and month, on user select it will call some function, which will change props of the component Data, and in ShouldComponentUpdate of Data you can check was filters changed or no, and sort dates by the filter.

This is good answer with example, how it can be implemented in react, but also it would be more easy to use Redux.

Hope this help.

UPD: Given example:

You can create your calender as empty html. Example of filtering :

ParentComponent

class CalendarContainer extends React.Component {
  construnctor(props) {
    super(props)
    this.state = { 
       dataObjects = [..],
       datefilter = null
    } 
  }

  ShouldComponentUpdate(newProps, newState) {
      return newState.filter != this.state.filter
  }

  handeUpdateFilter = (newFilter) => {
      this.setState({dateFiter : newFilter});
  }

  getFilteredDates = () => {
     return this.state.dataObjects.filter(x => x.date == this.state.dateFilter);
  }

  render () {
    return (
       <Filters filter={this.state.dateFilter}
          handeUpdateFilter = {this.chandeUpdateFilter}/>
       <DataTable dates={this.getFilteredDates()})
    }
}

And in filter component simply call props.handeUpdateFilter(newFilter)