my-reactjs-table is a light weight yet most powerfull yet simple yet fully customizable ReactJS Table Component. my-reactjs-table npm package size is < 37 KB
my-reactjs-table
Original Design
| No | Name | Gender | City | |
|---|---|---|---|---|
| 1 | Mohit Agarwal | Male | Jaipur | mohit724agarwal@gmail.com |
| 2 | Rohit Agarwal | Male | Banglore | rohit@gmail.com |
| 3 | Surbhi | Femal | Surat | surbhi@gmail.com |
| 4 | Ashish Sharma | Male | Jodhpur | ashish@gmail.com |
Transparent Design
| No | Name | Gender | City | |
|---|---|---|---|---|
| 1 | Mohit Agarwal | Male | Jaipur | mohit724agarwal@gmail.com |
| 2 | Rohit Agarwal | Male | Banglore | rohit@gmail.com |
| 3 | Surbhi | Femal | Surat | surbhi@gmail.com |
| 4 | Ashish Sharma | Male | Jodhpur | ashish@gmail.com |
| 5 | Naman Gupta | Male | Delhi | naman@gmail.com |
| 6 | Prateek Sharma | Male | Mumbai | prateek@gmail.com |
| 7 | Surbhi | Femal | Surat | surbhi@gmail.com |
| 8 | Rohit Agarwal | Male | Banglore | rohit@gmail.com |
How to use
import MyReactTable from 'my-reactjs-table'
function App() {
return(
)
}
export default App;
Creating Columns
import MyReactTable from 'my-reactjs-table'
function App() {
const columns = ["No", "Name", "Email", "Mobile No", "Status"]
return(
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"]
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(
columns={ columns } rowData={ tableData }
)
}
export default App;
All Available Props
import MyReactTable from 'my-reactjs-table'
function App() {
const settings = {
// only 1 Property type allowed at once
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(
settings={ settings }
)
}
export default App;