T
TanStack•12mo ago
quickest-silver

Help with rerender

Hello, everyone! I'm learning tanstack-table and trying to do table with editable cells. I want to indicate changes in parent component, so I added state const [isRecordChanged, setRecordChanged] = useState<boolean>(false) Added setRecordChanged to table meta and trying to trigger it on onChange 
  const TableCell = ({ getValue, row, column, table }) => {
    const initValue = getValue()
    const columnMeta = column.columnDef.meta
    const tableMeta = table.options.meta
    const [value, setValue] = useState(initValue)
    useEffect(() => {
      setValue(initValue)
    }, [initValue])
    const onBlur = () => {
      tableMeta?.updateData(row.index, column.id, value);
    }
    const handleChange = (value: string | number) => {
      setValue(value)
      tableMeta?.setRecordChanged(true)
      if(columnMeta?.inputType === 'selector') tableMeta?.updateData(row.index, column.id, value);
    }
    if (tableMeta?.editableRecord
      &&
      tableMeta?.editableRecord.id === row.original.id
    ) {
      return (
        <EditableCell
          inputCellType={columnMeta?.inputType}
          value={value}
          name={column.id}
          optionsCategoryId={columnMeta?.optionsCategoryId}
          handleChange={handleChange}
          validationErrors={validationErrors}
          onBlur={onBlur}
        />
      )
    }
    return (
      <span
        className='max-w-full truncate rounded-full px-3 hover:bg-white hover:rounded-sm hover:border-solid hover:border-1 hover:border-grey-200'
        title={value}
        onClick={() => { if (tableMeta?.isEditMode ?? !tableMeta?.isRecordChanged) tableMeta?.setEditableRecord(row.original) }}
      >{value}</span>
    )
  }
  const TableCell = ({ getValue, row, column, table }) => {
    const initValue = getValue()
    const columnMeta = column.columnDef.meta
    const tableMeta = table.options.meta
    const [value, setValue] = useState(initValue)
    useEffect(() => {
      setValue(initValue)
    }, [initValue])
    const onBlur = () => {
      tableMeta?.updateData(row.index, column.id, value);
    }
    const handleChange = (value: string | number) => {
      setValue(value)
      tableMeta?.setRecordChanged(true)
      if(columnMeta?.inputType === 'selector') tableMeta?.updateData(row.index, column.id, value);
    }
    if (tableMeta?.editableRecord
      &&
      tableMeta?.editableRecord.id === row.original.id
    ) {
      return (
        <EditableCell
          inputCellType={columnMeta?.inputType}
          value={value}
          name={column.id}
          optionsCategoryId={columnMeta?.optionsCategoryId}
          handleChange={handleChange}
          validationErrors={validationErrors}
          onBlur={onBlur}
        />
      )
    }
    return (
      <span
        className='max-w-full truncate rounded-full px-3 hover:bg-white hover:rounded-sm hover:border-solid hover:border-1 hover:border-grey-200'
        title={value}
        onClick={() => { if (tableMeta?.isEditMode ?? !tableMeta?.isRecordChanged) tableMeta?.setEditableRecord(row.original) }}
      >{value}</span>
    )
  }
Now my component rerender when I'm trying to change something first time and drop focus
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?