Проверка некоторых столбцов в React-Data-Grid

Question

Я хочу реализовать проверку для таблицы реагирующих данных в сетке, в которой будут проверяться только ячейки, которые я определил в самом столбце, и проверка происходит только в том случае, если для состояния установлено значение true.

Итаку меня есть следующие коды здесь

const [ validateMode, setValidateMode ] = useState(false);
const errorBackground = { backgroundColor: 'some error color in here' }


const DescriptionFormatter = props => {
    const { value, row } = props;
    let template;

    if (!validateMode){
        template = value;
    }

    if (validateMode){
        let validationStyling = Boolean(value.length) ? {} : errorBackground;
        template = <div style={{ ...validationStyling }}>value</div>
    }

    return template;
}

const tableCols = [
    {
        key: 'id',
        name: 'No'
    },
    {
        key: 'name',
        name: 'Name',
        editable: !disabled,
        editor: <AutoComplete options={nameList} />
    },
    {
        key: 'description',
        name: 'Description',
        editable: !disabled,
        formatter: DescriptionFormatter
    }
];

Когда кнопка нажата, она вызовет состояние validateMode в true, и когда это произойдет, я хочу, чтобы столбец описания подтвердил ячейку и вернул фоновую ячейку ошибки, если значениепустой, в противном случае фон по умолчанию, если в нем есть значение (простая проверка, является ли значение пустым или нет).

Не получается заставить работать журнал консоли validateMode, когда я нажимаю кнопку.Он отображается только на странице init или при изменении ячейки (например, при вставке значения в нее). Я не могу заставить проверку работать здесь, если только я не сделаю это неправильно.

Пожалуйста, помогите мне в этом.

Answer 1

Не могу поверить, что я отвечаю на свой вопрос lol

В любом случае, я уже нашел ответ.Проверка не может быть выполнена при определении столбцов.Это должно быть сделано на уровне ячеек таблицы данных.Вы можете передавать состояния в ячейку и выполнять там проверку, а также изменять CSS ячейки с помощью условного className, чтобы показать, является ли проверка истинной или ложной.

Фрагменты кодов, чтобы заставить его работать

import ReactDataGrid, { Row, Cell } from "react-data-grid";

/* 
  Validator is a state passed from the parent page that indicates whether page is on validation or not, in case
  if dev want the table to validate when a trigger hits the page (like submit button?)
*/
const { validator } = props;

const CustomCell = props => {
  let valueValidation = false;

  if (validator){
    /* Insert custom validation in here */
    return ( <Cell {...props} className={ validator && valueValidation ? '' : classes.error } /> );
  }

  /* If not in validation mode, display normal rows */
  if (!validator){
    return ( <Cell {...props} /> );
  }
}

const CustomRow = props => {
  return ( <Row {...props} cellRenderer={cellProps => <CustomCell {...cellProps} />} /> );
}

return (
  <ReactDataGrid
    rowRenderer={CustomRow}
  />
);