1.0.1 • Published 3 years ago

dynamic-smart-table-react v1.0.1

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

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

PropertyRequiredTypeDescriptionExample
tableColumnsyesarrayof({ header: string, columnData: arrayof(string)})initial table datatableColumns = {[{ header: 'company', columnData: ['adidas', 'nike', 'puma', 'reebok'] }, { header: 'founded', columnData: ['1949', '1964', '1948', '1958'] }]}
emptyCellPlaceholdernostringempty cell placeholderemptyCellPlaceholder="empty"
tableClassesnoobjectkeys are values from STYLING section, values are your custom classes, or array of classestableClasses={{ table: classes.table, addRowButton: classes.addRowButton, sendButton: [classes.sendButton, classes.mt] }}
cellSpacingnostringvalue to define gap between cellscellSpacing = "300"
minColumnSizenonumbervalue to define minimal size of table columns (default 300px)minColumnSize={200}`
onCeilEditnofunctiongets new Table data as a prop, emmits when edit cell-
onCeilBlurnofunctiongets new Table data as a prop, emmits when cell blurs-
onHeaderEditnofunctiongets new Table data as a prop, emmits when edit header-
onHeaderBlurnofunctiongets new Table data as a prop, emmits when header blurs-
onSendDatanofunctiongets 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:

alt text

reactsmarttabledynamic
@infinitebrahmanuniverse/nolb-dynami@everything-registry/sub-chunk-1542@zalastax/nolb-dynami
1.0.1

3 years ago