PrimeReact currentPageReportTemplate styling

Question

How can I add styles to the property currentPageReportTemplate from this component:

public render(): React.ReactElement<IMonitoringProps> {

    const template = {
      layout: 'FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport',
      CurrentPageReport: `${this.props.strings.TotalRecords} {totalRecords}`
      // 'CurrentPageReport': <span style=
      //             {{fontFamily: 'Rubik, sans-serif',
      //               fontSize: '12px',
      //               fontWeight: 'normal',
      //               letterSpacing: '0px',
      //               color: '#667891'}}>
      //           {this.props.strings.TotalRecords} {this.state.totalCount}
      //         </span>
  };


    const tableColumns = this.getTableColumns();

    return (
      <div id="monitoring-page">
        <StyledFuncRow className="additional-func-row" data-test="func-row">
          <MonitoringFilters
            strings={this.props.strings}
            typeOptions={this.getTypeColumnOptions()}
            onRangeSelected={this.filterData}
          />
        </StyledFuncRow>

        <StyledMonitoringTable
          dataKey="id"
          tableClassName="monitoring-table"
          value={this.state.records}
          paginator={true}
          rows={this.tableRowsCount}
          first={this.state.first}
          lazy={true}
          expandedRows={this.state.expandedRows}
          rowExpansionTemplate={(data) => this.nestedTableTemplate(data)}
          totalRecords={this.state.totalCount}
          emptyMessage={this.props.strings.NoRecordsFound}
          onRowToggle={(e) => this.rowToggled(e.data)}
          onPage={this.onPageChanged}
          rowsPerPageOptions={[20, 50, 100]}
          pageLinkSize={11}
          paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown CurrentPageReport"
          currentPageReportTemplate={`${this.props.strings.TotalRecords} {totalRecords}`}>
          {tableColumns}
        </StyledMonitoringTable>
      </div>
    );
  }

As you see I was using a template, but it didn't work. How can I add the commented styles in the template object to the currentPageReportTemplate?

score 1 · Answer 1 · answered Dec 23 '21 at 12:22

You are doing it incorrectly. See the showcase example: https://www.primefaces.org/primereact/datatable/paginator/

const template1 = {
            layout: 'PrevPageLink PageLinks NextPageLink RowsPerPageDropdown CurrentPageReport',
            'PrevPageLink': (options) => {
                return (
                    <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
                        <span className="p-p-3">Previous</span>
                        <Ripple />
                    </button>
                )
            },
            'NextPageLink': (options) => {
                return (
                    <button type="button" className={options.className} onClick={options.onClick} disabled={options.disabled}>
                        <span className="p-p-3">Next</span>
                        <Ripple />
                    </button>
                )
            },
            'PageLinks': (options) => {
                if ((options.view.startPage === options.page && options.view.startPage !== 0) || (options.view.endPage === options.page && options.page + 1 !== options.totalPages)) {
                    const className = classNames(options.className, { 'p-disabled': true });

                    return <span className={className} style={{ userSelect: 'none' }}>...</span>;
                }

                return (
                    <button type="button" className={options.className} onClick={options.onClick}>
                        {options.page + 1}
                        <Ripple />
                    </button>
                )
            },
            'RowsPerPageDropdown': (options) => {
                const dropdownOptions = [
                    { label: 10, value: 10 },
                    { label: 20, value: 20 },
                    { label: 50, value: 50 },
                    { label: 'All', value: options.totalRecords }
                ];

                return <Dropdown value={options.value} options={dropdownOptions} onChange={options.onChange} />;
            },
            'CurrentPageReport': (options) => {
                return (
                    <span className="p-mx-3" style={{ color: 'var(--text-color)', userSelect: 'none' }}>
                        Go to <InputText size="2" className="p-ml-1" value={this.state.currentPage} tooltip={this.state.pageInputTooltip}
                            onKeyDown={(e) => this.onPageInputKeyDown(e, options)} onChange={this.onPageInputChange}/>
                    </span>
                )
            }
        };

PrimeReact currentPageReportTemplate styling

1 Answers1