Skip to content

abdulghanitech/react-table-modern

Repository files navigation

react-table-modern

A Modern Table Made using React 🔥

NPM JavaScript Style Guide

Install

npm install --save react-table-modern

Usage

import React, { Component } from 'react'

import ReactTableModern from 'react-table-modern'

const data = [
  {
    name: 'Abdul Ghani',
    address: { city: 'Hyd', street: 'stret', country: 'India' },
    phone: '9191919191',
    email: '[email protected]',
    website: 'abdulghani.tech'
  },
  {
    name: 'Abdul Ghani 2',
    address: { city: 'Bng', street: '1et', country: 'USA' },
    phone: '9191975571',
    email: '[email protected]',
    website: 'abdulghani.tech'
  },
  {
    name: 'Abdul Ghani 3',
    address: { city: 'Bng', street: '1et', country: 'USA' },
    phone: '9191975571',
    email: '[email protected]',
    website: 'abdulghani.tech'
  },
  {
    name: 'Abdul Ghani 4',
    address: { city: 'Bng', street: '1et', country: 'USA' },
    phone: '9191975571',
    email: '[email protected]',
    website: 'abdulghani.tech'
  },
  {
    name: 'Abdul Ghani 5',
    address: { city: 'Bng', street: '1et', country: 'USA' },
    phone: '9191975571',
    email: '[email protected]',
    website: 'abdulghani.tech'
  },
  {
    name: 'Abdul Ghani 6',
    address: { city: 'Bng', street: '1et', country: 'USA' },
    phone: '9191975571',
    email: '[email protected]',
    website: 'abdulghani.tech'
  }
]

const columns = [
  {
    dataField: 'name',
    text: 'Name',
  },
  {
    dataField: 'address.country',
    text: 'Address',
  },
  {
    dataField: 'phone',
    text: 'Phone'
  },
  {
    dataField: 'email',
    text: 'Email'
  },
  {
    dataField: 'website',
    text: 'Website'
  }
]

class Example extends Component {
  render() {
    return (
      <ReactTableModern
        data={data}
        columns={columns}     
      />
    )
  }
}

Props

Prop Type Default Required
data Array Of Objects [] true
columns Array Of Objects [] true
paginationRequired boolean true false
paginationItemsPerPage number 5 false
tableWrapperStyle React.CSSProperties - false
tableStyle React.CSSProperties - false
tableHeaderStyle React.CSSProperties - false
tableHeaderCellsStyle React.CSSProperties - false
tableCellsStyle React.CSSProperties - false
nextAndPrevBtnStyle React.CSSProperties - false
PaginationWrapperStyle React.CSSProperties - false
paginationBtns React.CSSProperties - false

License

MIT © abdulghanitech

Releases

No releases published

Packages

No packages published