PTB-fe/components/Riwayat/TableRiwayat.js

import React, { Component } from "react";
import ContentWrapper from "@/components/Layout/ContentWrapper";
import { Container, Progress } from "reactstrap";

let ReactDataGrid = null;
class TableRiwayat extends Component {
  state = {
    dataGridReady: false,
  };

  constructor(props, context) {
    super(props, context);

    this._columns = [
      {
        key: "timelapse",
        name: "Timelapse",
        sortable: true,
      },
      {
        key: "username",
        name: "Username",
        sortable: true,
      },
      {
        key: "menu",
        name: "Menu",
        sortable: true,
      },
      {
        key: "deskripsi",
        name: "Deskripsi",
        sortable: true,
      },
    ];

    let originalRows = this.createRows(1000);
    let rows = originalRows.slice(0);
    this.state = { originalRows, rows };
  }

  componentDidMount() {
    ReactDataGrid = require("react-data-grid");
    this.setState({
      dataGridReady: true,
    });
  }

  getRandomDate = (start, end) => {
    return new Date(
      start.getTime() + Math.random() * (end.getTime() - start.getTime())
    ).toLocaleDateString();
  };

  createRows = () => {
    let rows = [];
    for (let i = 1; i < 11; i++) {
      rows.push({
        deskripsi: "deskripsi di sini",
        complete: Math.min(100, Math.round(Math.random() * 110)),
        menu: ["Pelaporan", "Login", "Penjadwalan", "Sanksi"][
          Math.floor(Math.random() * 3 + 1)
        ],
        username: ["sugiyanto", "sugiyanti", "andi", "yazid"][
          Math.floor(Math.random() * 3 + 1)
        ],
        timelapse: this.getRandomDate(new Date(2018, 3, 1), new Date()),
        completeDate: this.getRandomDate(new Date(), new Date(2021, 0, 1)),
      });
    }

    return rows;
  };

  rowGetter = (i) => this.state.rows[i];

  handleGridSort = (sortColumn, sortDirection) => {
    const comparer = (a, b) => {
      if (sortDirection === "ASC") {
        return a[sortColumn] > b[sortColumn] ? 1 : -1;
      } else if (sortDirection === "DESC") {
        return a[sortColumn] < b[sortColumn] ? 1 : -1;
      }
    };

    const rows =
      sortDirection === "NONE"
        ? this.state.originalRows.slice(0)
        : this.state.rows.sort(comparer);

    this.setState({ rows });
  };

  render() {
    return (
      <ContentWrapper>
        <Container fluid>
          {this.state.dataGridReady && (
            <ReactDataGrid
              onGridSort={this.handleGridSort}
              columns={this._columns}
              rowGetter={this.rowGetter}
              rowsCount={this.state.rows.length}
              // minHeight={0}
            />
          )}
        </Container>
        <div align="center">
          <span>Riwayat Pengguna</span>
        </div>
      </ContentWrapper>
    );
  }
}

export default TableRiwayat;