custom-react-data-table v1.3.1

React API Data Table

Minimum package size

React API Data Table is a simple and 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 simple data table

custom-simple-data-table

Installation

React data table requires ReactJS v16+ to run.

Install the dependencies

 npm install --save custom-react-data-table

Just import these components...

import DatatableWithApi from "custom-react-data-table";
import 'custom-react-data-table/datatable.corestyle.css';

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-react-data-table/datatable.corestyle.css';
import DatatableWithApi from "custom-react-data-table";

export default class App extends Component {
    state = {
        data: null,
        orgData: null,
        count: 0,
        limit: 10,
        offset: 0,
    }
    componentDidMount() {
        this.fetchMyAPI();
    }

    fetchMyAPI = async (limit = this.state.limit, offset = this.state.offset) => {
        let urlobj = { url: `https://pokeapi.co/api/v2/pokemon?limit=${limit}&offset=${offset}` }
        await fetch(urlobj.url)
            .then((res) => res.json())
            .then((data) => {
                if (data["count"]) {
                    this.setState({ data: data.results, orgData: data.results, count: data.count });
                }
            });
    }

    pageChangeCallback = (page, limit) => {
        let offset = limit * (page - 1);
        this.setState({ limit, offset });
        this.fetchMyAPI(limit, offset);
    }
    filterTableCallback = (searchText) => {
        let sortData = this.state.orgData.filter(el => {
            let searchString = el && el.name ? el.name : "";
            searchString += el && el.url ? "," + el.url : "";
            if (searchString.indexOf(searchText) !== -1) {
                return true;
            }
            return false;
        });
        this.setState({ data: sortData });
    }
    pageSizeCallback = (value) => {
        let limit = value;
        this.setState({ limit });
        this.fetchMyAPI(limit, 0);
    }
    fieldSortingCallback = (field, order) => {
        let SortData = this.state.orgData;
        if (order === "up") {
            SortData.sort((a, b) => {
                if (a[field] > b[field]) {
                    return 1;
                }
                return -1;
            });
        } else {
            SortData.sort((a, b) => {
                if (a[field] > b[field]) {
                    return -1;
                }
                return 1;
            });
        }
        this.setState({ data: SortData });
    }

    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>
                {<DatatableWithApi
                    header={tableHeadArray}
                    dataArr={this.state.data}
                    pageChangeCallback={this.pageChangeCallback}
                    fieldSortingCallback={this.fieldSortingCallback}
                    filterTableCallback={this.filterTableCallback}
                    pageSizeCallback={this.pageSizeCallback}
                    showPageSize={{
                        title: "पृष्ठ संख्या: ",
                        defaultValue: this.state.limit,
                        pageSizeArr: [10, 20, 50, 100, 250],
                        top: true, bottom: true
                    }}
                    showPagination={{
                        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={{ top: true, bottom: true, value: this.state.count }}
                    tableClass={"table"}
                    tableHeadClass={"table head"}
                    tableHeadRowClass={"table rowhead"}
                    tableBodyClass={"table body"}
                    norecordsfound={{ align: "center", title: "no records"}}
                />}
            </div>
        );
    }
}

Props

License

MIT