Server side sorting on a column : ReactJS

[vjr12]

I am trying to implement sorting where the sorting on the server side happens by taking the column name and the type of sort(asc or des).

I am maintaining a component for a data table where-in I attach a click handler that basically should give the field name that I click and the type of sorting. I can hardcode the fieldnam, But how will I map each column with type of sorting.

I just need the name of the field and type to be sent to the backend, then it will give me sorted results. How will I map corresponding column names with either asc/desc

Can someone help me with this?

Sandbox: https://codesandbox.io/s/misty-water-iutxl

import * as React from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import Child from "./Child";
interface IState {
  data: {}[];
  columns: {}[];
  selectedValues: {};
}

interface IProps {}

export default class App extends React.Component<IProps, IState> {

  constructor(props: any) {
    super(props);
    this.state = {
      data: [],
      columns: [],
    };
  }

  componentDidMount()
  {
    this.getColumnFilterValues();
    this.getData();
  }

  getData = () =>{
    let data = [
        { firstName: "Jack", status: "Submitted", age: "14" },
        { firstName: "Simon", status: "Pending", age: "15" },
        { firstName: "Pete", status: "Approved", age: "17" }
      ];
      this.setState({data},()=> this.getColumns());
  }

  getColumnFilterValues = () =>{
    let optionsForColumns = {
        firstName: [
          { Jack: "4", checked: false },
          { Simon: "5", checked: false },
          { Pete: "10", checked: false }
        ],
        status: [
          { Submitted: "5", checked: false },
          { Pending: "7", checked: false },
          { Approved: "15", checked: false }
        ]
      }
      this.setState({optionsForColumns});
  }

  sortHandler = (name) =>{
     //Sort Handler, here I have to pass the field name and type of sorting
  }

  getColumns = () =>{
    let columns = [
      {
        Header: () => (
          <div>
            <div style={{ position: "absolute", marginLeft: "10px" }}>
              <Child
                key="firstName"
                name="firstName"
                options={this.getValuesFromKey("firstName")}
                handleFilter={this.handleFilter}
              />
            </div>
            <span onClick={()=>this.sortHandler("firstName")}>First Name</span>
          </div>
        ),
        accessor: "firstName",
        sortable: false,
        show: true,
        displayValue: " First Name"
      },
      {
        Header: () => (
          <div>
            <div style={{ position: "absolute", marginLeft: "10px" }}>
              <Child
                key="status"
                name="status"
                options={this.getValuesFromKey("status")}
                handleFilter={this.handleFilter}
              />
            </div>
            <span onClick={()=>this.sortHandler("status")}>Status</span>
          </div>
        ),
        accessor: "status",
        sortable: false
      },
      {
        Header: () =>(
          <span onClick={this.sort}>Age</span>
        ),
        accessor: "age"
      }
    ];
    this.setState({ columns });
  }

  //Rendering the data table
  render() {
    const { data, columns } = this.state;
    return (
      <div>
        <ReactTable
          data={data}
          columns={columns}
        />
      </div>
    );
  }
}

[bhagwans]

handleChange = (state, instance) => {
    console.log(state.sorted)
    //state.sorted will give you array of sorting fields with order (ASC or DESC) 
    //which you can send to server for data retrieval 
}
<ReactTable
      onFetchData={this.handleChange}
/>
//On every change handleChange Will be called

[vjr12]

@bhagwans I do not want the reactable server side sorting. Would want to write a customized one, as you can see in the columns,array Inside header I am having this onClick which will be called on every header click. All I want is fieldname and sort order wherever I click on a column. At a time I can send only one fieldname to the backend. I just a means for maintaining the object for the fields and sort order. It would be really helpful if you could edit the sandbox itself:)