https://github.com/halo-lab/smart-table
https://github.com/halo-lab/smart-table
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/halo-lab/smart-table
- Owner: Halo-Lab
- Created: 2021-07-28T07:58:01.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2022-01-18T07:44:05.000Z (over 4 years ago)
- Last Synced: 2025-04-09T22:08:08.794Z (about 1 year ago)
- Language: JavaScript
- Size: 440 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Description
Using the react-smart-dynamic-table you can dynamically add, edit, delete columns, headers, cells
# Demo
[DEMO LINK](https://codesandbox.io/s/nifty-jennings-8cu39?file=/src/App.js)
# Installation
```npm i react-smart-dynamic-table```
# API
| Property | Required | Type | Description | Example |
| ------------- |-------------| -----| ------------- |-------------|
| tableColumns | yes | arrayof({ header: string, columnData: arrayof(string)}) | initial table data | ``` tableColumns = {[{ header: 'company', columnData: ['adidas', 'nike', 'puma', 'reebok'] }, { header: 'founded', columnData: ['1949', '1964', '1948', '1958'] }]}```|
| emptyCellPlaceholder | no | string | empty cell placeholder | ```emptyCellPlaceholder="empty" ```|
| tableClasses | no | object | keys are values from STYLING section, values are your custom classes, or array of classes | ``` tableClasses={{ table: classes.table, addRowButton: classes.addRowButton, sendButton: [classes.sendButton, classes.mt] }} ``` |
| cellSpacing | no | string | value to define gap between cells | ```cellSpacing = "300"``` |
| minColumnSize | no | number | value to define minimal size of table columns (default ```300px```) | ````minColumnSize={200}``` |
| onCeilEdit | no | function | gets new Table data as a prop, emmits when edit cell | - |
| onCeilBlur | no | function | gets new Table data as a prop, emmits when cell blurs | - |
| onHeaderEdit | no | function | gets new Table data as a prop, emmits when edit header | - |
| onHeaderBlur | no | function | gets new Table data as a prop, emmits when header blurs | - |
| onSendData | no | function | gets new Table data as a prop, emmits when click send button | - |
## STYLING:
### General Buttons
* addColumnButton
* addRowButton
* sendButton
### Modal
* modalOverlay
* modal
* modalText
* modalInput
* modalSetButton
* modalCloseButton
### Table
* container
* table
* tableHead
* tableHeadRow
* tableHeadCell
* tableHeadTextarea
* deleteButton
* deleteRowButton
* tableBody
* tableBodyRow
* tableBodyCeilTextarea
# Usage
### App.js
```javascript
import Table from 'react-smart-dynamic-table'
import classes from './App.module.scss';
function App() {
const tableColumns = [{
header: 'name',
columnData: ['adidas', 'nike', 'puma', 'reebok']
},
{
header: 'founded',
columnData: ['1949', '1964', '1948', '1958']
},
{
header: 'origin',
columnData: ['Germany', '', 'Germany', 'USA']
}
]
return (
);
}
export default App;
```
### App.module.scss
```
.addRowButton {
color: red;
}
.sendButton {
background-color: black;
color: white;
}
.mt {
margin-top: 30px;
}
.container {
margin-top: 20px;
}
```
expected result:
## Word from author
Have fun! ✌️
