Как отсортировать / отфильтровать столбец с данными с помощью кнопки без настройки сортировки или фильтра в простейшей реакции?

Question

Я пытался создать таблицу, в заголовке которой есть меню, содержащее поле Сортировка и фильтр.Сортировка имеет две кнопки Ascending и Descending, чтобы отсортировать данные в таблице, а фильтр имеет поле ввода.Я хочу использовать это меню вместо установки filter = true или sortable = true.Как передать эти данные из таблицы кнопке для сортировки или фильтрации?Как пометить для сортировки или фильтрации в зависимости только от поля, находящегося в фокусе?

Это table.js

import React from 'react';
import PropTypes from 'prop-types';
import './table.css';
import {DataTable} from 'primereact/components/datatable/DataTable';
import {Column} from 'primereact/components/column/Column';
import {Header} from './Header';
import {TableService} from './TableService';


export class Table extends React.Component{
constructor(){
    super();

    this.state = {
        data:[],
        first: 0, 
        rows: 10
    };
    this.tableService= new TableService();
    this.onPageChange = this.onPageChange.bind(this);
}

onPageChange(event) {
    this.setState({
        first: event.first,
        rows: event.rows
    });
}
componentDidMount(){
    this.tableService.getSampleData().then(data=>this.setState({datas:data}));
}



render(){

    const columns = [
        {field: 'sno', header: (<Header field={this.field} header='sno'/>)},
        {field: 'name', header: (<Header field={this.field} header='Name'/>)},
        {field: 'unit', header: (<Header field={this.field} header='Unit'/>)},
        {field: 'status', header: (<div><Header field='status' header='Status'/></div>)}
    ];

    const dynamicColumns = columns.map((col,i) => {
    return (

    <Column key={col.field} field={col.field} header={col.header}/>
    );
    });

    return (
        <div>
            <DataTable sortField="ledgerName" ref={(el) => this.dt = el}  value={this.state.datas} paginator={true} rows={5}>
            {dynamicColumns}

            </DataTable>

        </div>
    );
}
}

Table.prototypes ={
  sno : PropTypes.string.isRequired,
  name :  PropTypes.string.isRequired,
  unit:  PropTypes.number.isRequired,
  status:  PropTypes.string.isRequired
};

Это Header.js

import React from 'react';
import {Menu} from './Menu';
import {OverlayPanel} from 'primereact/components/overlaypanel/OverlayPanel';
import {Button} from 'primereact/components/button/Button';


export class Header extends React.Component{



render(){

    return(
        <div>

    <Button id="menu" type="button" label={this.props.header} onClick={(e) => this.op.toggle(e)} iconPos="right" icon="fa fa-caret-down" />
    <OverlayPanel ref={(el) => this.op = el} appendTo={document.body}>
   <Menu field={this.props.field} />
  </OverlayPanel>
        </div>
    );
  }

 }

Это Menu.js

import React, {Component} from 'react';
import Dropdown from 'react-dropdown';

export class Menu extends Component {
constructor(){
    super();
    this.state={
        status:null
    };
    this.onStatusChange=this.onStatusChange.bind(this);
}

onStatusChange=(e)=>{
    const statusChange=e.value;
    this.setState({
        status: statusChange
        //status:e
    });
}


render() {

    const statusArr = [
        { label : 'Study', value: 'study'},
        { label : 'Finalized', value: 'finalized'},
        { label : 'Prospect', value: 'prospect'},
        { label : 'To Validate', value: 'To Validate'},
        { label : 'Authorized', value: 'authorized'},
        { label : 'Renewed', value: 'renewed'},
        { label : 'accepted', value: 'accepted'},
        { label : 'All', value: ''}
        ];
    return (
        <div>

     <h6>Sort</h6>
         <div class="p-grid">
             <div class="p-col-12 p-md-6">
        <button  className="a1" label="Ascending">Ascending
        </button>
    </div>
    <div class="p-col-12 p-md-6">
        <button pButton className="a1" label="Descending" >Descending
        </button>
    </div>

</div>

<h6>Filter</h6>
{this.props.field==='status'? <Dropdown className="b4" value={this.state.status} options={statusArr} onChange={this.onStatusChange} placeholder="Select"/>: <input id="search" className="in" onInput={(e) => this.setState({filter: e.target.value})} placeholder="Filter"  size="10" />}



       </div>
         );
      }
    }

Это tableservice.js

import axios from 'axios';

 export class TableService {
    getSampleData(){
    return axios.get("sampleData/sample.json").then(res => res.data.data);


  }

getStatus(){
    return [
      { label : 'Study', value: 'study'},
      { label : 'Finalized', value: 'finalized'},
      { label : 'Prospect', value: 'prospect'},
      { label : 'To Validate', value: 'To Validate'},
      { label : 'Authorized', value: 'authorized'},
      { label : 'Renewed', value: 'renewed'},
      { label : 'accepted', value: 'accepted'}
    ] 
  }
}