mui-editable-table-component

props	type	description
defaultData	array of objects	rows of data already added
fieldsArr	array of objects	each obj with validation key a function which is called with event and its columns data,here check validation return false to show error,label for table head(required),name(required),you can give type(optional) select,if you give select type then selectMessage,options are required,error message to show error
getData	function	this function is called on save and delete to provide all data to parent
tableName	string	name of table,default is mytable
initWithoutHead	boolean	if true only show add button and no heads,if no data available
addRowBtnText	string	button text for add Row Button

---

Example and source code available at codesandbox

const fieldsArr = const fieldsArr = [
  {
    label: "Name of UBO", (required)
    name: "name", (required)
    validation: (e,coloumnData) => {
      const name = e.target.value;
      if (name.length > 6) {
        return false;
      } else {
        return true;
      }
    },
    error: "Enter a good name"
  },
 {
    label: "RelationShip",
    selectMessage: "Select",
    name: "relationship",
    type: "select",
    options: [
      { label: "None", value: "" },
      { label: "Share Holder", value: "shareholder" },
      { label: "Director", value: "director" }
    ],
    validation: (e, a) => {
      const name = e.target.value;
      if (name.length > 6) {
        return false;
      } else {
        return true;
      }
    },
    error: "go home kid"
  },
];

 <EditableTable
  defaultData={[]}
  giveToParent={getData}
  fieldsArr={fieldsArr}
/>

CSS Usage

To apply css you have below keys available for each correspondence tag element. Also if you want to use old css classnames,then these keys with sufix _tableName are also available.

import EditableTable from 'mui-editable-table-component'

 const styles = () => ({
  table: {},
  tableHead: {},
  tableHeadRow: {},
  tableHeadCell: {},
  tableBody: {},
  tableBodyRow: {},
  tableBodyCell: {},
  inputWrapperDiv: {},
  input: {},
  error: {},
  selectFormControl: {},
  selectInputLabel: {},
  select: {},
  selectMenuItem: {},
  saveBtn: {},
  cancelBtn: {},
  addBtn: {},
  deleteBtn: {},
  editBtn: {}
});

for plain old css(if table is mytable)

.table_mytable{
background:red;
}
.tableHead_mytable{
colour:blue;
}

export default withStyles(styles)(EditableTable);