How to set size of filter (Primefaces React v6.x)?

UI Components for React
Post Reply
dnv2006
Posts: 2
Joined: 26 Nov 2021, 11:33

26 Nov 2021, 11:36

My code

Code: Select all

 <DataTable ref={dt} value={tableData} paginator className="p-datatable-customers" rows={10} dataKey="acctgTransId"
			   emptyMessage={t('acc.trans.noAccountingTransactionFound')} loading={loading}
			   selectionMode="single" onSelectionChange={(e) => setSelectedItem(e.value)}
			   filters onFilter={onFilter} first={lazyParams.first} rows={lazyParams.rows} totalRecords={totalRecords} onPage={onPage}
			   rowsPerPageOptions={[10, 25, 50, 100]}
			   paginatorTemplate="FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink CurrentPageReport RowsPerPageDropdown"
			   currentPageReportTemplate="Showing {first} to {last} of {totalRecords}" lazy onSort={onSort} sortField={lazyParams.sortField} sortOrder={lazyParams.sortOrder} resizableColumns columnResizeMode="fit" reorderableColumns showGridlines>
		{/*style={{width:'20%'}}*/}
		<Column field="acctgTransId" header={t('acc.trans.code')} style={{width: '70px'}} sortable body={bodyTemplate} filter filterElement={textFilter("acctgTransId", orderIdFilter)}/>
		<Column field="acctgTransTypeEnumId" header={t('acc.trans.type')} sortable body={bodyTemplate} filter filterElement={textFilter("acctgTransTypeEnumId", orderIdFilter)}/>
		<Column field="organizationPartyId" header={t('acc.trans.organizationPartyId')} sortable body={bodyTemplate} filter filterElement={textFilter("organizationPartyId", orderIdFilter)}/>
		<Column field="isPosted" header={t('acc.trans.isPosted')} sortable body={bodyTemplate} filter filterElement={textFilter("isPosted", orderIdFilter)}/>
		{/*<Column field="glJournalId" header={t('acc.trans.glJournalId')} sortable body={bodyTemplate} filter filterElement={textFilter("glJournalId", orderIdFilter)}/>*/}
		<Column field="glFiscalTypeEnumId" header={t('acc.trans.glFiscalTypeEnumId')} sortable body={bodyTemplate} filter filterElement={textFilter("glFiscalTypeEnumId", orderIdFilter)}/>
		<Column field="transactionDate" header={t('acc.trans.transactionDate')} sortable body={timeTemplate} filter filterElement={dateFilter("transactionDate", transactionDate)}/>
		<Column field="amountUomId" header={t('acc.trans.amountUomId')} sortable body={bodyTemplate} filter filterElement={textFilter("amountUomId", orderIdFilter)}/>
		<Column field="lastUpdatedStamp" header={t('acc.trans.lastUpdatedStamp')} sortable body={timeTemplate} filter filterElement={dateFilter("lastUpdatedStamp", lastUpdatedStamp)}/>
	</DataTable>
Image

How to set size of filter (Primefaces React v6.x)?

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

27 Nov 2021, 18:47

Just add this CSS your app it will force the filter to always be the size of the column.

Code: Select all

body .p-inputtext.p-column-filter {
  width:100%;
}
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

dnv2006
Posts: 2
Joined: 26 Nov 2021, 11:33

01 Dec 2021, 11:26

Thank you. I really appreciate your 3 lines of code. It works now.

Melloware
Posts: 3716
Joined: 22 Apr 2013, 15:48

01 Dec 2021, 11:51

Glad I could help!
PrimeFaces Developer | PrimeFaces Extensions Developer
GitHub Profile: https://github.com/melloware
PrimeFaces Elite 13.0.0 / PF Extensions 13.0.0
PrimeReact 9.6.1

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 8 guests