Package Exports

react-smart-dynamic-table

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-smart-dynamic-table) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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:

alt text

react-smart-dynamic-table