Page 1 of 1

DataTable / TreeTable - How to style invalid cells?

Posted: 17 Jun 2020, 16:38
by jchau
Is there a way to style invalid cells with a custom css class or styles? The current behavior just leaves the cell in edit mode. We want to highlight the invalid cells with red border.

Re: DataTable / TreeTable - How to style invalid cells?

Posted: 11 Oct 2020, 01:03
by mert.sincan
Hi,

Sorry for the delayed response! You can do it using editor property of Column. Firstly, you can store the invalid keys in state. These keys can be row or column index or the unique option of data. Then, you can add a class after finding invalid data on editor template.
https://www.primefaces.org/primereact/s ... table/edit

Exp;

Code: Select all

...
inputTextEditor(productKey, props, field) {
...
        return <div className={`field_in_this.state.invalidKeys ? 'p-invalid-cell' : '' `}>
        		<InputText type="text" value={props.rowData[field]} onChange={(e) => this.onEditorValueChange(productKey, props, e.target.value)} />;
        	    <div>
 }
Best Regards,