reactjs-simple-table/components/server-simple-table.js

Reactjs simple table for showing list of data with sorting and pagation

import React, { useState, useEffect } from "react";
import "./simple-table.styles.css";
import BodyTableComponent from "./table-body";
import FooterTableComponent from "./table-footer";
import HeaderTableComponent from "./table-header";

const ServerSimpleTableComponent = ({
  columns,
  list,
  total,
  numberPerPage: numberPerPageTable,
  isRtl = false,
  numberPageOfText,
  tableClassName,
  onGetData,
  serverSideFiltering
}) => {
  const [data, setData] = useState([]);
  const [columnsData, setColumnsData] = useState([]);
  const [orderby, setOrderBy] = useState("");
  const [order, setOrder] = useState("");
  const [totalTable, setTotalTable] = useState(1);
  const [page, setPage] = useState(1);
  const [numberPerPage, setNumberPerPage] = useState(10);
  const [numberOfPage, setNumberOfPage] = useState(0);
  useEffect(() => {
    setColumnsData(columns);
    setTotalTable(total);
  }, []);
  useEffect(() => {
    setNumberPerPage(numberPerPageTable ? numberPerPageTable : 10);
    setNumberOfPage(Math.ceil(totalTable / numberPerPage));
  }, [totalTable]);
  useEffect(() => {
    setNumberPerPage(numberPerPage ? numberPerPage : 10);
    setNumberOfPage(Math.ceil(totalTable / numberPerPage));
  }, [numberPerPage]);
  useEffect(() => {
    setData(list);
  }, [list]);
  useEffect(() => {
    if (serverSideFiltering && orderby !== "" && order !== "") {
      onGetData({
        page: page,
        numberPerPage: numberPerPage,
        order: order === "descending" ? "ascending" : "descending",
        orderby: orderby
      });
    }
  }, [orderby, order]);
  useEffect(() => {
    onGetData({
      page: page,
      numberPerPage: numberPerPage,
      order: order === "descending" ? "ascending" : "descending",
      orderby: orderby
    });
  }, [page, numberPerPage]);

  const sort = item => {
    setOrderBy(item);
    let orderTemp = "descending";

    if (item === orderby && order === "descending") {
      orderTemp = "ascending";
    }

    if (!serverSideFiltering) {
      if (orderTemp === "descending") {
        setData(list.sort((a, b) => a[item] > b[item] ? 1 : -1));
      } else {
        setData(list.sort((a, b) => a[item] < b[item] ? 1 : -1));
      }
    }

    setOrder(orderTemp);
  };

  const nextPage = () => {
    if (page + 1 <= numberOfPage) {
      setPage(page + 1);
    }
  };

  const previousPage = () => {
    if (page - 1 >= 1) {
      setPage(page - 1);
    }
  };

  const handleChange = e => {
    setNumberPerPage(e.target.value);
    setPage(1);
  };

  return /*#__PURE__*/React.createElement("div", {
    className: isRtl ? "rtl" : "ltr"
  }, /*#__PURE__*/React.createElement("div", {
    className: ""
  }, /*#__PURE__*/React.createElement("table", {
    className: tableClassName ? tableClassName : "mytable"
  }, /*#__PURE__*/React.createElement(HeaderTableComponent, {
    columns: columns,
    orderby: orderby,
    order: order,
    sort: sort
  }), /*#__PURE__*/React.createElement(BodyTableComponent, {
    data: data,
    columnsData: columnsData
  }))), /*#__PURE__*/React.createElement(FooterTableComponent, {
    previousPage: previousPage,
    nextPage: nextPage,
    isRtl: isRtl,
    page: page,
    numberOfPage: numberOfPage,
    numberPerPage: numberPerPage,
    handleChange: handleChange,
    numberPageOfText: numberPageOfText
  }));
};

export default ServerSimpleTableComponent;