Material Inline Operation Table

This package can be used in your react applications to manage some table data. You can perform add,update and delete operations with this package.

This package uses standart mui table of react.

Installation

You can use standart npm package installation

npm i material-inline-operation-table

Usage

class InlineTableClass extends Component {
  constructor(props) {
    //...
  }

  //your other code here...

  headRows = [
    {
      id: "someId",
      numeric: false,
      disablePadding: false,
      label: "label for someId", // this value will be seen in coumn header
      type: "string", //can be string,date,chip,icon,currency,number,bool or component
      width : 10 //formatted as number, is not applied for actions column. Total number of width must be 100
    },
    /*your other column sets here*/
    { id: "actions", numeric: true, disablePadding: false, label: "" }, //this must exist
  ];


  render() {
    return (
      <React.Fragment>
        <InlineTable
          //..........
        />
      </React.Fragment>
    );
  }
}

Parameters

Parameter	Required	Default Value	Description
fetchDataMethod	true	-	api method for getting table data
fetchDataMethodParameter	true	-	parameters of api method data
headRows	true	-	column definitions of the table
deleteMethod	true	-	api method for deleting table data
saveMethod	true	-	api method for update table data
addMethod	true	-	api method for insert table data
inlineForm	true	-	free style react component which will appear when user wants to add a new record or update an existing record
emptyModel	true	-	will be the initial values when user wants to add new record
tableName	true	-	name will appear in table heading
tableId	true	-	id representing the table
showButtons	true	-	define wihch buttons will appear (add,update,delete, csv, print, refresh,filterBar or columnsBar ) Ex. Format : { add: true, edit: false, delete: true, csv: true, search: true, refresh : true, filterBar : true, columnsBar : true, print : true}
allowPagination	true	-	whether the pagination will be applied , true or false
onRowSelected	false	null	action triggered on row click Ex. Format : (e, row) => { console.log(e,row); }
identifierColumn	true	-	this column will use for identifying row for selection
onAllButtonClick	false	null	-
tableSize	false	"medium"	define table size "small","medium" or "large"
operationMessages	false	{ add: { toolTip: "Yeni Kayıt", success: "Ekleme işlemi başarılı", fail: "Ekleme işlemi başarısız", }, update: { toolTip: "Düzenle", success: "Düzenleme işlemi başarılı", fail: "Düzenleme işlemi başarısız", }, delete: { toolTip: "Sil", onDeletePopup: "Kayıt silinecektir. Onaylıyor musunuz?", success: "Silme işlemi başarılı", fail: "Silme işlemi başarısız", }, general: { unexpectedError: "Beklenmeyen bir hata oluştu", confirm: "Onayla", cancel: "Vazgeç",columnsPopUp : "Sütunları Göster",selectAll : "Hepsi" }, }	operation messages and tooltip definitions can be done with this parameter
containerName	false	"material_inline_operation_table"	used for naming the buttons of table and its rows
boolColumnLabels	false	{ true: "Evet", false: "Hayır" }	text will appear when column type is selected as "bool"
kafkaUsage	false	{ addMethod : false, saveMethod : false, deleteMethod : false }	define whether kafka integration is made any of operations.
signalRNotificationComponent	false	null	free style signalR notification component for connecting signalR hub
setBlocking	false	null	used for blocking the screen when kafka usage exists
isConnectionAlive	false	true	when kafka is used and signalR connection exists, the table will be rendered
signalRNotificationComponentProps	false	null	parameters of signalRNotificationComponent. Ex. Usage : { methodName : "signalRMethodName", setConnectionStatus : (status) => {console.log(status);}, onMessage : (message) => {console.log(message);} }
initializeTransaction	false	null	is used for defining transactionID for the row currently operated on. Ex. Usage : initializeTransaction(row) { const transactionID = uuidv4(); this.setState({...this.state,islemKod:transactionID}); row.islemKod = transactionID; }
forceStopCount	false	0	is used for re-rendering the table. Defined for kafka usage
defaultOrderColumn	false	null	define default column to be ordered by. if null, identifiercolumn is used
defaultOrderWay	false	"asc"	define default order way for ordering. "asc" or "desc"
defaultRowsPerPage	false	10	define value of rows per page. 5,10,25,50 or 100
rowsMaxHeight	false	1000	define max length of table in px.
rowHeight	false	80	define length of table in px.
customComponents	false	null	customComponent renderer for the column. column type should be set to "component". the parameter format should be a list of objects in format : {id : "the id which should match the column id", component : free style React component ,params : parameters used by free style component, getParamsFromRow : the list of parameter names which should be get from the identifier column value of the row }

Internationalization

You can pass "intl" object as props to use internationalization. In your API, the methods you use must return a JSON object containing "success" and "errorId" fields.

Like this :

{
  ...
  "success" : true or false,
  "errorId" : "A message contained in your language file"
  ...
}

License

MIT