thematrix-responsive-table

Responsive Bootstrap Table with thematrix-entities engine

Install

npm install --save thematrix-responsive-table

Usage

import React, { useEffect,useState } from 'react'

import { ResponsiveTable } from 'thematrix-responsive-table';
import 'thematrix-responsive-table/dist/index.css';

const App = () => {
  const data= require('./data.json');
  console.log('data',data);
  const columns = [
    {
      Header: "Photo",
      accessor: "image",
      sortable: false,
      filter: false,
      decorator(v, i, row) {
        return <img src={v} alt={row.name} />;
      },
    },
    {
      Header: "First Name",
      accessor: "firstName",
      sortable: true,
      filter: true,
    },
    {
      Header: "Last Name",
      accessor: "lastName",
      sortable: true,
      filter: true,
    },
    {
      Header: "Email",
      accessor: "email",
      sortable: true,
      filter: true,
    },
    {
      Header: "Phone",
      accessor: "phone",
      sortable: true,
      filter: true,
    }
  ];
  const Pagination1=(pageProps)=>{
    let options=[];
    for(let i =1;i<=pageProps.totalPage;i++){
      options.push(<option key={i} value={i} selected={pageProps.page==i}>{i}</option>);
    }
    return (<div className='pagination1-wrap'>
      <select onChange={(e)=>{
        pageProps.setPage(e.target.value);
      }} value={pageProps.page}>
        {options}
      </select>
      {' '}
      <button onClick={pageProps.previous}>Prev</button>
      <button onClick={pageProps.next}>Next</button>
    </div>);
  };
  return (<div className='main'>
    <ResponsiveTable
    className='table'
    data={data}
    columns={columns}
    defaultPageSize={5}
    noMore={() => {
      console.log('no more');
    }}
    localLoading={function () {
      console.log('loading');
      setTimeout(function () {
        console.log('stop loading');
      }, 100)
    }}
    pagination={Pagination1}
  />
  </div>);
  
};

export default App

License

MIT