DataTable / TreeTable - How to style invalid cells?

UI Components for React
Post Reply
jchau
Posts: 3
Joined: 26 Nov 2019, 01:27

17 Jun 2020, 16:38

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.

mert.sincan
Posts: 4345
Joined: 29 Jun 2013, 12:38

11 Oct 2020, 01:03

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,

Post Reply

Return to “PrimeReact”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 1 guest