react-table-test-zrcu v1.0.6

react-table-test-zrcu

React table component for everyone

Install

Install main package

npm install --save react-table-test-zrcu

Install styled-components (required)

npm install --save styled-components

Usage

import React, { Component } from 'react';

import MyComponent from 'react-table-test-zrcu';

class Example extends Component {
  render () {
    return (
      <MyComponent />
    );
  }
}

Props

General

data (required) - must be an Array of Objects, every object must contain 3 keys. Keys must be called 'first', 'second', 'third'. Values up to you.

addNewCell (required) - must be a function. Will be executed when you click on the right-bottom button. This can be any function. But I supposed it to add new cell to table.

For Example

onAddNewCell = () => {
    /// Simulation of post request to the server
    new Promise((resolve, reject) => {
      setTimeout(function(){
        resolve("Added!");
      }, 2500);
    }).then(response => {
      console.log(response)
    }).catch(err => {
      console.log(err.message)
    })
    /// Adding new empty cell to our array in case if you use local state
    this.setState(prevState => ({
      users: prevState.users.concat({
        first: '', 
        second: '', 
        third: ''})
    }));
  }

removeCell (required) - must be a function. Will be executed when you click on the inner button inside every cell. This can be any function. But I supposed it to remove new cell from the table.

For Example

onRemoveCell = (index) => {
    /// Simulation of delete request to the server
    new Promise((resolve, reject) => {
      setTimeout(function(){
        resolve("Removed!");
      }, 2500);
    }).then(response => {
      console.log(response)
    }).catch(err => {
      console.log(err.message)
    })
    /// Removing item from our array of items in case if you use local state
    this.setState(prevState => ({
      users: prevState.users.filter((user, ind) => {
        return ind !== index;
      })
    }))
  }

changeContent (required) - must be a function. Will be executed when you edit any data inside the table. This can be any function. But I supposed it to update your local state whenever you edit something.

For Example

onChangeContent = (value, ind, name) => {
    this.setState(prevState => ({
        users: prevState.users.map((person, index) => {
          if (index === ind){
              person[name] = value
          }
          return person;
      })
    }))
  }

saveData (required) - must be a function. Will be executed when you click on the left-bottom button. This can be any function. But I supposed it to send put or post request to the server and update the data.

For Example

 onSaveData = () => {
   /// Simulation of sending put or post request to the server
    new Promise((resolve, reject) => {
      setTimeout(function(){
        resolve("Database updated!");
      }, 2500);
    }).then(response => {
      console.log(response)
    }).catch(err => {
      console.log(err.message)
    })
  }

width - must be a string. Width of the table in pixiles.

For Example

width='300px'

header - must be a string. This will be a header name of the table.

rightBtn - must be a string. This will be a right button name. Supposed to add new cells, but it's up to you.

leftBtn - must be a string. This will be a left button name. Supposed to update database, but it's up to you.

innerBtn - must be a string. This will be an inner button. Supposed to remove table cell, but it's up to you.

firstP, secondP, thridP - every prop must be a string. Will be used to name headers inside every cell.

License

MIT © Aleksey-Kiselov