custom-simple-data-table v1.1.0

React Simple Data Table

Minimum package size

React Simple Data Table is a custom table with the logical features. You can easily manage your data table by search operation, pagination, page size change, sorting column and render your custom column with your own style. We are made with a core style but you can change everything with your own styles even you can change the icon of the pagination, sorting, changeable position of the pagination/page size with the visible and hide feature, and text renders with different-2 languages. Overall it's flexible with any website, cms, mis etc.

Click below link for react API data table

custom-react-data-table

Installation

React data table requires ReactJS v16+ to run.

Install the dependencies

 npm install --save custom-simple-data-table

Just import these components...

import "custom-simple-data-table/datatable.corestyle.css";
import DatatableComponent from "custom-simple-data-table";

Either you can import a given style or you can make your own style for this data table.

Usage & Demo code

Just copy paste this code to check all features

import React, { Component } from "react";

import "custom-simple-data-table/datatable.corestyle.css";
import DatatableComponent from "custom-simple-data-table";

export default class App extends Component {
  state = {
    data: null,
    count: 0,
  };
  componentDidMount() {
    this.fetchMyAPI();
  }
  fetchMyAPI = async () => {
    let urlobj = {
      url: `https://pokeapi.co/api/v2/pokemon?limit=30&offset=0`,
    };
    await fetch(urlobj.url)
      .then((res) => res.json())
      .then((data) => {
        if (data["count"]) {
          this.setState({
            data: data.results,
          });
        }
      });
  };
  pageChangeCallback = (page) => {
    console.log("page change callback event : ", page);
  };
  filterTableCallback = (searchText) => {
    console.log("search text callback event : ", searchText);
  };
  pageSizeCallback = (value) => {
    console.log("page size callback event ", value);
  };
  fieldSortingCallback = (object) => {
    console.log("coloum sorting callback event ", object);
  };
  render() {
    let tableHeadArray = [
      { title: "S.no.", serial: true, thClass: "firstTH" },
      { title: "Name", field: "name", sorting: true, thClass: "secondTH" },
      {
        title: "Url",
        field: "url",
        sorting: true,
        tdStyle: (obj) => {
          let style = {};
          if (obj.url.indexOf("1") !== -1) {
            style = { background: "#ffe047" };
          }
          return style;
        },
        return: (obj) => {
          return (
            <a href={`${obj.url}`} target="_blank" rel="noopener noreferrer">
              {obj.url}
            </a>
          );
        },
      },
      {
        title: "Action",
        return: (obj) => {
          return (
            <>
              <button onClick={() => console.log("edit obj =", obj)}>
                Edit
              </button>
              <button onClick={() => console.log("Delete obj ", obj)}>
                Delete
              </button>
            </>
          );
        },
      },
    ];
    return (
      <div>
        <DatatableComponent
          header={tableHeadArray} // mandatory
          dataArr={this.state.data} // mandatory
          pageChangeCallback={this.pageChangeCallback} // optional
          fieldSortingCallback={this.fieldSortingCallback} // optional
          filterTableCallback={this.filterTableCallback} // optional
          pageSizeCallback={this.pageSizeCallback} // optional
          showPageSize={{ // optional
            title: "पृष्ठ संख्या: ",
            defaultValue: 10,
            pageSizeArr: [10, 20, 30, 50, 100, 250],
            top: true,
            bottom: true,
          }}
          showPagination={{ // optional
            top: true,
            bottom: true,
            doubleLeftImg: "",
            leftImg: "",
            rightImg: "",
            doubleRightImg: "",
            dleft_tooltip: "first page",
            left_tooltip: "prev. page",
            right_tooltip: "next page",
            dright_tooltip: "last page",
          }}
          showTotalRecord={{ // optional
            top: true,
            bottom: true,
          }}
          norecordsfound={{ // optional
            title: "No record's found !",
            align: "center",
            trClass: "tr text",
            tdClass: "td text",
          }}
          searchShow={{ // optional
            show: true,
            clearSearch: true,
            placeholder: "filter...",
          }}
          tableClass={"table"} // optional
          tableHeadClass={"table head"} // optional
          tableHeadRowClass={"table rowhead"} // optional
          tableBodyClass={"table body"} // optional
        />
      </div>
    );
  }
}

Props

License

MIT