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