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

| Props | Object Keys |Type | Details | e.g.| | ------ | ------ | ------ | ------ | ------ | | dataArr (mandatory) | | Array | An array of the table data | | | header (mandatory) | | Array | An array of the table head object | | | | title (mandatory) | String | Custom table column title | "S.No." | | | serial (optional) | Boolean | If true show the serial number of the record | | | | field (mandatory) | String | Data array object keys | if data array is [{name:"abc"}{name:"def"}] then field is 'name' | | | sorting (optional) | Boolean | If true show the sorting option to related field || | | thClass (optional) | String | for th tag class | | | | tdStyle (optional) | Callback Function | This function is return special case style and record object is an attribute of this function | tdStyle: (obj) => { let style = {}; if (obj.url.indexOf("1") !== -1) { style = { background: "#ffe047" }; } return style; } | | | return (optional) | Callback Function | This function is return custom design data for a cell and record object is an attribute of this function | e.g.1: return: (obj) => {return <a href={${obj.url}}>{obj.url}; } e.g.2: return: (obj) => { return ( <> <button onClick={() => console.log("edit obj =", obj)}>Edit</>);} | | pageChangeCallback (optional) | | Function | Page change callback | | | fieldSortingCallback (optional) | | Function | Sorting column callback | | | filterTableCallback (optional) | | Function | On search filter table callback | | | pageSizeCallback (optional) | | Function | On page size change callback | | | showPageSize (optional) | | Object | Page size data object | | | | title (optional) | String | Custom page size title | | | | defaultValue (optional) | Integer | Page size default value | | | | pageSizeArr (optional) | Integer Array | Page size array for select page size | [10,20,50] | | | top (optional) | Boolean | page size on top if true | | | bottom (optional) | Boolean | page size on bottom if true | | showPagination (optional) | | Object | Pagination data object | | | top (optional) | Boolean | Pagination on top if true | | | bottom (optional) | Boolean | Pagination on bottom if true | | | dleft_tooltip (optional) | String | Double left button tooltip title | "first page" | | | left_tooltip (optional) | String | Left button tooltip title | "previous page" | | | right_tooltip (optional) | String | Right button tooltip title | "next page" | | | dright_tooltip (optional) | String | Double right button tooltip title | "last page" | | | doubleLeftImg (optional) | String | First page button image/icon url | | | | leftImg (optional) | String | Previous page image/icon url | | | | rightImg (optional) | String | Right image/icon url | | | | doubleRightImg (optional) | String | Right image/icon url | | | showTotalRecord (optional) | | Object | Total record of the table object | | | | top (optional) | Boolean | Total Records show on top if true | | | bottom (optional) | Boolean | Total Records show on bottom if true | | norecordsfound (optional) | | Object | show the no records title and align the text| { align: "center", title: "no records"} | | | title (mandatory) | String | Total Records value | | | | align (optional) | String | Align of the text - center, left and right | | | | trClass (optional) | String | Related row class name | | | | tdClass (optional) | String | Related cell class name | | | searchShow (optional) | | Object | Search any text from the table| | | | show (mandatory) | Boolean | For show the search field | | | | clearSearch (optional) | Boolean | clear the input text | | | | placeholder (optional) | String | placeholder of the search input field | | | tableClass (optional) | | String | Table tag class name | | | tableHeadClass (optional) | | String | Table head tag class name | | | tableHeadRowClass (optional) | | String | Table head row class name | | | tableBodyClass (optional) | | String | Table body class name | |

License

MIT