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

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: '[phone]', Status: 'Active'},
    { No:2, Name: 'Shubham Soni', Email: '[e-mail]', Mobile: '++911234567890', Status: 'Inactive'},
    { No:3, Name: 'Ashish Garg', Email: '[e-mail]', 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

🔗 Links

Feedback

If you have any feedback, please reach out to us at [e-mail]

🛠 Skills

Javascript, HTML, CSS, ReactJS, NextJS, NPM, MongoDB, SQL, React-Native,

License

MIT