My-reactjs-table NPM

my-reactjs-table

A React Component, for which you can use to create simple yet amazing Table Component in your React Project

Installation

Install my-project with npm

  npm i my-reactjs-table
  
  yarn add my-reactjs-table

Demo

Live Demo

Usage/Examples

import MyReactTable from 'my-reactjs-table'

function App() {
    return(
        <MyReactTable />
    )
}

export default App;

Props

Parameter	Type	Description
`columns`	`array`	It has to be an Array with many options as String inside
`rowData`	`array`	It has to be an Array of Objects, containing row Data
`settings`	`object`	It has to be an Object with many provided settings to
			customized React Table Component

Creating Table Columns

import MyReactTable from 'my-reactjs-table'

function App() {
  const columns = ["No", "Name", "Email", "Mobile No", "Status"]

    return(
        <MyReactTable columns={ columns }/>
    )
}

export default App;

Creating Row Data / Table Data

import MyReactTable from 'my-reactjs-table'

function App() {
  const columns = ["No", "Name", "Email", "Mobile", "Status"]

    /* all keys of this rowData Objects has to be same as columns value*/

  const tableData = [
    { No:1, Name: 'Mohit Agarwal', Email: 'mohit724agarwal', Mobile: '+919680038708', Status: 'Active'},
    { No:2, Name: 'Shubham Soni', Email: 'shubham@sample.com', Mobile: '++911234567890', Status: 'Inactive'},
    { No:3, Name: 'Ashish Garg', Email: 'ashish@sample.com', Mobile: '++9191919191', Status: 'Active'},
  ]

    return(
        <MyReactTable columns={ columns } rowData={ tableData }/>
    )
}

export default App;

Avaiable Settings for my-reactjs-table

import MyReactTable from 'my-reactjs-table'

function App() {
  
  const settings = {
      table: {
          borderRadius: '0px',
          background: '#c8000',     
          boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
          width: '20rem / 200px / 70%',
          minWidth: '20rem / 200px / 70%',
          maxWidth: '20rem / 200px / 70%',
          height: '20rem / 200px / 70%',
          minHeight '20rem / 200px / 70%',
          maxHeight '20rem / 200px / 70%',
      },
      pagination: {
          show: true,
          rowPerPage: 12,
          showTotalData: true,
      },
      header: {
          color: '#005cc8 / rgba(110,115,120,0.5)',
          textAlign: 'center',
          background: '#005cc8 / rgba(110,115,120,0.5)',
      },
      row: {
          textAlign: 'left',
          color: '#005cc8 / rgba(110,115,120,0.5)',
          background: '#005cc8 / rgba(110,115,120,0.5)',
          padding: '0.2rem 0.9rem / 3.4px 8px'
      },
      caption:{
        show: true,
        heading: 'Hello there this is my table',
        textAlign: 'left',
        padding: '1rem',
        fontSize: '1rem',
        textTransform: 'uppercase',
        color: 'orange'
    }
  }

    return(
        <MyReactTable settings={ settings }/>
    )
}

export default App;

Valid Data types of Settings

Parameter	Type
table
`background`	`string`
`boxShadow`	`string`
`width`	`string`
`minWidth`	`string`
`maxWidth`	`string`
`height`	`string`
`minHeight`	`string`
`maxHeight`	`string`

pagination
`show`	`boolean`
`rowPerPage`	`number`
`showTotalData`	`boolean`

header
`color`	`string`
`textAlign`	`string`
`background`	`string`

row
`textAlign`	`string`
`color`	`string`
`background`	`string`
`padding`	`string`