Description

Using the react-smart-dynamic-table you can dynamically add, edit, delete columns, headers, cells

Demo

DEMO LINK

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

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 (
    <div className="App">
      <Table 
        tableColumns={tableColumns}
        tableClasses={{ 
            container: classes.container, 
            addRowButton: classes.addRowButton,
             sendButton: [classes.sendButton, classes.mt]
          }}
      />
    </div>
  );
}

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: