How can i do edtable data but with validation

[misaku]

i would like know some things like
is possible put editable some columns not all?
can i put validation to columns?
can i put update when finish row?
and how can i do this?

[yugmade13]

Have you figured it out? I have a similar issue.

[shammalie]

You can use the TableMeta and ColumnMeta from the docs.

An example below:

Add the fields you need, this follows Tan Stack table editable data example.

declare module "@tanstack/react-table" {
  interface TableMeta<TData extends RowData> {
    updateData: (
      rowIndex: number,
      columnId: string,
      value: unknown,
      isValid: boolean,
    ) => void;
  }
  interface ColumnMeta<TData extends RowData, TValue> {
    required: boolean;
    type: string; 
    pattern?: string;
    validationMessage?: string;
    validate?(value: TValue): TValue;
  }
}

Add validation message function with changes to the update functions in the defaultColumn defintion.

// Give our default column cell renderer editing superpowers!
const defaultColumn: Partial<ColumnDef<Person>> = {
  cell: ({
    getValue,
    row: { index },
    column: { id, columnDef },
    table: {
      options: { meta },
    },
  }) => {
    const initialValue = getValue();
    const columnMeta = columnDef.meta;
    // We need to keep and update the state of the cell normally
    const [value, setValue] = React.useState(initialValue);
    const [validationMessage, setValidationMessage] = React.useState("");

    // When the input is blurred, we'll call our table meta's updateData function
    const onBlur = (e: ChangeEvent<HTMLInputElement>) => {
      displayValidationMessage(e);
      meta?.updateData(index, id, value, e.target.validity.valid);
    };

    // If the initialValue is changed external, sync it up with our state
    React.useEffect(() => {
      setValue(initialValue);
    }, [initialValue]);

    const displayValidationMessage = <
      T extends HTMLInputElement | HTMLSelectElement,
    >(
      e: ChangeEvent<T>,
    ) => {
      if (columnMeta?.validate) {
        const isValid = columnMeta.validate(e.target.value);
        if (isValid) {
          e.target.setCustomValidity("");
          setValidationMessage("");
        } else {
          e.target.setCustomValidity(columnMeta.validationMessage ?? "");
          setValidationMessage(columnMeta.validationMessage ?? "");
        }
      } else if (e.target.validity.valid) {
        setValidationMessage("");
      } else {
        setValidationMessage(e.target.validationMessage);
      }
    };

    return (
      <Input
        className="invalid:[&:not(:placeholder-shown):not(:focus)]:border-red-500"
        value={value as string}
        onChange={(e) => setValue(e.target.value)}
        onBlur={onBlur}
        type={columnMeta?.type ?? "text"}
        required={columnMeta?.required}
        title={validationMessage}
        pattern={columnMeta?.pattern}
      />
    );
  },
};

Set your validation props in meta.

const columns = React.useMemo<ColumnDef<Person>[]>(
    () => [
      {
        accessorKey: "firstName",
        footer: (props) => props.column.id,
        meta: {
          type: "text",
          required: true,
        },
      },
      {
        accessorFn: (row) => row.lastName,
        id: "lastName",
        header: () => <span>Last Name</span>,
        footer: (props) => props.column.id,
        meta: {
          type: "text",
          required: true,
          pattern: "^[a-zA-Z]+$", // example with regex pattern matching for validaiton.
        },
      },
      // Additional column defs here.
    ],
    [],
  );

Update the table component to include edited and valid rows and populate the meta property in useReactTable.

const [editedRows, setEditedRows] = React.useState({});
const [validRows, setValidRows] = React.useState({});

const table = useReactTable({
    data,
    columns,
    defaultColumn,
    getCoreRowModel: getCoreRowModel(),
    getFilteredRowModel: getFilteredRowModel(),
    getPaginationRowModel: getPaginationRowModel(),
    autoResetPageIndex,
    // Provide our updateData function to our table meta
    meta: {
      editedRows,
      setEditedRows,
      validRows,
      setValidRows,
      updateData: (rowIndex, columnId, value, isValid: boolean) => {
        // Skip page index reset until after next rerender
        skipAutoResetPageIndex();
        setData((old) =>
          old.map((row, index) => {
            if (index === rowIndex) {
              return {
                ...old[rowIndex]!,
                [columnId]: value,
              };
            }
            return row;
          }),
        );
        setValidRows((old) => ({
          ...old,
          [rowIndex]: { ...old[rowIndex], [columnId]: isValid },
        }));
      },
    },
    debugTable: true,
  });

// ...

Credit for this response has to go to @muhimasri for his effort on this blog post.
https://muhimasri.com/blogs/validate-react-table/

A reproducible project can be found here: https://github.com/shammalie/desk-management
Specifically https://github.com/shammalie/desk-management/tree/main/src/app/table-with-validation