Skip to content

Commit

Permalink
Fix primefaces#5460: Column dynamically evaluate rowEditor
Browse files Browse the repository at this point in the history
  • Loading branch information
@melloware
melloware committed Dec 22, 2023
1 parent eaef7dd commit ba3633b
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 17 deletions.
44 changes: 28 additions & 16 deletions components/doc/datatable/edit/roweditdoc.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,14 +72,18 @@ export function RowEditDoc(props) {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
};

const allowEdit = (rowData) => {
return rowData.name !== 'Blue Band';
};

const code = {
basic: `
<DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
<Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
<Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
<Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
<Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
<Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
<Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
</DataTable>
`,
javascript: `
Expand Down Expand Up @@ -155,14 +159,18 @@ export default function RowEditingDemo() {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
};
const allowEdit = (rowData) => {
return rowData.name !== 'Blue Band';
};
return (
<div className="card p-fluid">
<DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
<Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
<Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
<Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
<Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
<Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
<Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
</DataTable>
</div>
);
Expand All @@ -171,9 +179,9 @@ export default function RowEditingDemo() {
typescript: `
import React, { useEffect, useState } from 'react';
import { DataTable, DataTableRowEditCompleteEvent } from 'primereact/datatable';
import { Column } from 'primereact/column';
import { Column, ColumnEditorOptions } from 'primereact/column';
import { InputText } from 'primereact/inputtext';
import { InputNumber, InputNumberChangeEvent } from 'primereact/inputnumber';
import { InputNumber, InputNumberValueChangeEvent } from 'primereact/inputnumber';
import { Dropdown, DropdownChangeEvent } from 'primereact/dropdown';
import { Tag } from 'primereact/tag';
import { ProductService } from './service/ProductService';
Expand All @@ -192,7 +200,7 @@ interface Product {
}
export default function RowEditingDemo() {
const [products, setProducts] = useState<Product[] | null>(null);
const [products, setProducts] = useState<Product[]>();
const [statuses] = useState<string[]>(['INSTOCK', 'LOWSTOCK', 'OUTOFSTOCK']);
useEffect(() => {
Expand All @@ -219,21 +227,21 @@ export default function RowEditingDemo() {
let _products = [...products];
let { newData, index } = e;
_products[index] = newData;
_products[index] = newData as Product;
setProducts(_products);
};
const textEditor = (options) => {
return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback(e.target.value)} />;
const textEditor = (options: ColumnEditorOptions) => {
return <InputText type="text" value={options.value} onChange={(e: React.ChangeEvent<HTMLInputElement>) => options.editorCallback!(e.target.value)} />;
};
const statusEditor = (options) => {
const statusEditor = (options: ColumnEditorOptions) => {
return (
<Dropdown
value={options.value}
options={statuses}
onChange={(e: DropdownChangeEvent) => options.editorCallback(e.value)}
onChange={(e: DropdownChangeEvent) => options.editorCallback!(e.value)}
placeholder="Select a Status"
itemTemplate={(option) => {
return <Tag value={option} severity={getSeverity(option)}></Tag>;
Expand All @@ -242,26 +250,30 @@ export default function RowEditingDemo() {
);
};
const priceEditor = (options) => {
return <InputNumber value={options.value} onValueChange={(e: InputNumberChangeEvent) => options.editorCallback(e.value)} mode="currency" currency="USD" locale="en-US" />;
const priceEditor = (options: ColumnEditorOptions) => {
return <InputNumber value={options.value} onValueChange={(e: InputNumberValueChangeEvent) => options.editorCallback!(e.value)} mode="currency" currency="USD" locale="en-US" />;
};
const statusBodyTemplate = (rowData) => {
const statusBodyTemplate = (rowData: Product) => {
return <Tag value={rowData.inventoryStatus} severity={getSeverity(rowData.inventoryStatus)}></Tag>;
};
const priceBodyTemplate = (rowData) => {
const priceBodyTemplate = (rowData: Product) => {
return new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(rowData.price);
};
const allowEdit = (rowData: Product) => {
return rowData.name !== 'Blue Band';
};
return (
<div className="card p-fluid">
<DataTable value={products} editMode="row" dataKey="id" onRowEditComplete={onRowEditComplete} tableStyle={{ minWidth: '50rem' }}>
<Column field="code" header="Code" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
<Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
<Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
<Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
<Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
<Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
</DataTable>
</div>
);
Expand Down Expand Up @@ -298,7 +310,7 @@ export default function RowEditingDemo() {
<Column field="name" header="Name" editor={(options) => textEditor(options)} style={{ width: '20%' }}></Column>
<Column field="inventoryStatus" header="Status" body={statusBodyTemplate} editor={(options) => statusEditor(options)} style={{ width: '20%' }}></Column>
<Column field="price" header="Price" body={priceBodyTemplate} editor={(options) => priceEditor(options)} style={{ width: '20%' }}></Column>
<Column rowEditor headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
<Column rowEditor={allowEdit} headerStyle={{ width: '10%', minWidth: '8rem' }} bodyStyle={{ textAlign: 'center' }}></Column>
</DataTable>
</div>
<DocSectionCode code={code} service={['ProductService']} />
Expand Down
2 changes: 1 addition & 1 deletion components/lib/datatable/BodyCell.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -564,7 +564,6 @@ export const BodyCell = React.memo((props) => {
const tabIndex = getTabIndex(cellSelected);
const selectionMode = getColumnProp('selectionMode');
const rowReorder = getColumnProp('rowReorder');
const rowEditor = getColumnProp('rowEditor');
const header = getColumnProp('header');
const body = getColumnProp('body');
const editor = getColumnProp('editor');
Expand All @@ -573,6 +572,7 @@ export const BodyCell = React.memo((props) => {
const value = resolveFieldData();
const columnBodyOptions = { column: props.column, field: field, rowIndex: props.rowIndex, frozenRow: props.frozenRow, props: props.tableProps };
const expander = ObjectUtils.getPropValue(getColumnProp('expander'), props.rowData, columnBodyOptions);
const rowEditor = ObjectUtils.getPropValue(getColumnProp('rowEditor'), props.rowData, columnBodyOptions);
const cellClassName = ObjectUtils.getPropValue(props.cellClassName, value, columnBodyOptions);
const bodyClassName = ObjectUtils.getPropValue(getColumnProp('bodyClassName'), props.rowData, columnBodyOptions);
const style = getStyle();
Expand Down

0 comments on commit ba3633b

Please sign in to comment.