<StyledDataTable>
              <DataTable
                dataKey="id"
                sortMode="multiple"
                id="invoiceTable"
                key={this.props.rootStore.loaderStore.invoiceTableKey}
                lazy={true}
                emptyMessage={this.props.t("common.emptyMessage")}
                onSelectionChange={(e) => this.onSelectionChange(e)}
                onPage={(e) => this.onPageChange(e)}
                onSort={(e) => this.onPageChange(e)}
                onFilter={(e) => this.onPageChange(e)}
                rows={queryParams.rows}
                first={queryParams.first}
                filters={queryParams.filters as any}
                multiSortMeta={queryParams.multiSortMeta}
                value={invoices}
                autoLayout={shrinked}
                //responsiveLayout={!shrinked ? "scroll" : null}
                scrollable={shrinked ? true : false}
                totalRecords={totalCount}
                selection={this.state.selectedInvoices}
                paginatorLeft={this.getSelectedItemsTemplate()}
                paginator
                currentPageReportTemplate={getCurrentPageReportTemplate()}
                paginatorTemplate={getPaginatorTemplate()}
                rowsPerPageOptions={[20, 50, 100]}
                filterDisplay="row"
              >
                <Column
                  key={"selectInvoice"}
                  style={{ width: "2rem" }}
                  field={"selectInvoice"}
                  selectionMode={"multiple"}
                  reorderable={false}
                />
                {selectedColumns &&
                  this.getColumns(selectedColumns, queryParams)}
                <Column
                  frozen={shrinked}
                  alignFrozen="right"
                  body={this.actionBodyTemplate}
                  style={{ width: "4rem" }}
                />
              </DataTable>
            </StyledDataTable>

actionBodyTemplate = (rowData: any): JSX.Element => {
    return (
      <div
        style={{display: "flex"}}
      >
        <Button
          id={`id-${rowData.id}-comment`}
          className={`p-button-rounded p-button-text p-button-icon-only ${rowData.commented ? "blubicon-comment-active" : "blubicon-comment"}`}
          onClick={(e) => this.openCommentModal(rowData,e)}
        />
        <Tooltip
          showDelay={1000}
          target={`#id-${rowData.id}-comment`}
          content={this.props.t("entityInvoice.properties.message")}
          position={"left"}
        />
        {this.props.rootStore.userStore.hasRoles([userRoles.user, userRoles.audit,userRoles.admin]) && (
          <Button
            id={`id-${rowData.id}-history`}
            className={
              this.props.rootStore.invoiceStore.shrinked
                ? "p-button-rounded p-button-text p-button-icon-only"
                : "p-button-rounded p-button-text p-button-icon-only"
            }
            onClick={() => this.openHistoryModal(rowData)}
          >
            <i className="blubicon-info" />
          </Button>
        )}
      </div>
    );
  };