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: '[email protected]', Mobile: '++911234567890', Status: 'Inactive'},
    { No:3, Name: 'Ashish Garg', Email: '[email protected]', 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 [email protected]

🛠 Skills

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

License

MIT