rasel-react-table v2.0.0

rasel-react-table

Installation

Install rasel-react-table with npm:

npm install rasel-react-table

Usage

Very easy to use. Just provide props with columns and dataSource

import React, { Component } from "react";
import ReactDOM from "react-dom";
import {Table, Column} from "rasel-react-table";


const App  = ()=> {
    const columns: Column[] = [
        {
            title: "Image",
            dataIndex: "coverPhoto",
            render: (i: string) => <img className="w-10" src="img_avatar5.png" alt="" />,
        },
        {
            title: "Title",
            dataIndex: "title",
            sorter: (a: string, b: string) => {
                return a.toLowerCase() > b.toLowerCase() ? 1 : a.toLowerCase() < b.toLowerCase() ? -1 : 0;
            },
        },
        {
            title: "brandId",
            dataIndex: "brandId",
        },
        {
            title: "categoryId",
            dataIndex: "categoryId",
        },
        {
            title: "Price",
            dataIndex: "price",
            sorter: (a: number, b: number) => {
                return a > b ? 1 : a < b ? -1 : 0;
            },
        },
        {
            title: "Stock",
            dataIndex: "qty",
            sorter: (a: number, b: number) => {
                return a > b ? 1 : a < b ? -1 : 0;
            },
        },
        {
            title: "Sold",
            dataIndex: "sold",
            sorter: (a: number, b: number) => {
                return a > b ? 1 : a < b ? -1 : 0;
            },
        },
    ];
    
    const [state, setState] = useState<any>({
        pageSize: 10,
        currentPage: 1,
    });
    
    // fake data
    const data = new Array(1000).fill(1).map((_, index) => ({
        title: "Lenovo IdeaPad 3 Core i3 10th Gen -- " + index,
        qty: index,
        sold: index,
        categoryId: "60df5e546419f56b97610607",
        price: Math.round(500 + Math.random() * 1000),
        brandId: "613511bba937c621233341c8",
        createdAt: "2011-08-04T11:55:16.887Z",
        coverPhoto: "",
    }));
    
    return (
        <div className="App p-4 md:p10">
        <h1 className="text-3xl my-6 text-center font-bold">Responsive Table</h1>
        <div>
            <label htmlFor="">Per Page show</label>
            <input
                type="text"
                className="border-2 border-amber-400"
                placeholder="show items"
                onChange={(e) => setState({ ...state, pageSize: e.target.value })}
            />
        </div>
        <div className="mt-10">
            <div className="card">
                <Table 
                    className="w-full"
                    fixed={true}
                    dataSource={data ? data : []}
                    scroll={{ x: 800, y: 450 }}
                    columns={columns}
                    pagination={{ pageSize: state.pageSize, currentPage: 1 }}
                />
                </div>
            </div>
        </div>
    );
}

ReactDOM.render(<App />, document.getElementById("root"));

Check Live example

Params