Блог

 import React from "react";
import columns from "./TableColumns";
import MaterialTable from "material-table";
import "./saleTotal.css";


export default class TableComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      data: "",
      unique: {},
      selectedRow: "",
      startDate: "2020-09-20",
      endDate: "2020-09-21",
    };
    this.changeDate = this.changeDate.bind(this)
  }

 //start function on DOMContentLoad
 componentDidMount() {
  this.fetchData(this.state.startDate, this.state.endDate);
}

  //fetch data for table
  async fetchData(start, end) {
    try {

      const URL = "http://192.168.48.11:8000/api/api.php";
      var myHeaders = new Headers();
      myHeaders.append("Authorization", "fr-R#WinBRj12Tyy^Sm=#bi30Zs@Ql");
      myHeaders.append("Accept-Encoding", "gzip");
      let formdata = new FormData();
      formdata.append("act", "report1");
      formdata.append(
        "data",
        `{"start_date": "${start}", "end_date": "${end}"}`
      );

var requestOptions = {
  method: "POST",
  headers: myHeaders,
  body: formdata,
  redirect: "follow",
};

        const response = await fetch(URL, requestOptions)
        const json = await response.json()
        this.setState({data: json.data})

    } catch (err) {
      console.log(err);
    }
  }

  changeDate(){

    let start = document.getElementById("start");
    let end = document.getElementById("end");
    this.setState({startDate: start.value, endDate: end.value});
  }

  // fire function on dom update
  componentDidUpdate(prevProps, prevStats){
   if(this.state.startDate !== prevStats.startDate){
     this.fetchData(this.state.startDate, this.state.endDate);
   }
  }

  render() {
      return (
        <div className="tableWrapper">
            <input id="start" type="text" placeholder="dasawkisi"/>
            <input id="end" type="text" placeholder="dasasruli"/>
            <button onClick={this.changeDate}>submit</button>
          <MaterialTable
            title="გაყიდვები ჯამური"
            data={this.state.data ? this.state.data : []}
            columns={columns}
            onRowClick={(evt, selectedRow) =>
              this.setState({ selectedRow: selectedRow.tableData.id })
            }
            options={{
              search: true,
              pageSize: 50,
              sorting: true,
              pageSizeOptions: [15, 50, 100],
              maxBodyHeight: "775px",
            }}
          />
        </div>
      );
   
  }
}