3.2.3 • Public • Published

    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.


    You can use standart npm package installation

    npm i material-inline-operation-table


    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 (


    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 }


    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"




    npm i material-inline-operation-table

    DownloadsWeekly Downloads






    Unpacked Size

    76.1 kB

    Total Files


    Last publish


    • uyanikoglu