react table v7 with typescript
I'm unable to get this example to work with typescript, from react table v7 docs https://codesandbox.io/s/github/tannerlinsley/react-table/tree/v7/examples/editable-data?from-embed
here is my code
Editable Cell component
the table component
type EditableCellProps = {
value: any;
row: Row;
column: Column;
update: (index: number, id: string | undefined, value: any) => void;
};
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
update,
}: EditableCellProps) => {
const [value, setValue] = React.useState(initialValue);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
const onBlur = () => {
update(index, id, value);
};
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return (
<input
value={value}
onChange={(event) => onChange(event)}
onBlur={onBlur}
/>
);
};
type EditableCellProps = {
value: any;
row: Row;
column: Column;
update: (index: number, id: string | undefined, value: any) => void;
};
const EditableCell = ({
value: initialValue,
row: { index },
column: { id },
update,
}: EditableCellProps) => {
const [value, setValue] = React.useState(initialValue);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
const onBlur = () => {
update(index, id, value);
};
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return (
<input
value={value}
onChange={(event) => onChange(event)}
onBlur={onBlur}
/>
);
};
function Table<T extends object>({
columns,
data,
renderRowSubComponent,
}: TableOptions<T> & {
renderRowSubComponent: RenderRowSubComponentType;
}) {
const defaultColumn: Partial<Column<T>> | undefined = useMemo(
() => ({
Cell: EditableCell,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
visibleColumns,
} = useTable(
{
columns,
data,
defaultColumn, // <<< error
},
useExpanded
);
return (
{/* render table... */}
);
}
function Table<T extends object>({
columns,
data,
renderRowSubComponent,
}: TableOptions<T> & {
renderRowSubComponent: RenderRowSubComponentType;
}) {
const defaultColumn: Partial<Column<T>> | undefined = useMemo(
() => ({
Cell: EditableCell,
}),
[]
);
const {
getTableProps,
getTableBodyProps,
headerGroups,
rows,
prepareRow,
visibleColumns,
} = useTable(
{
columns,
data,
defaultColumn, // <<< error
},
useExpanded
);
return (
{/* render table... */}
);
}
1 Reply
Solved
function EditableCell<T extends object>({
value: initialValue,
row: { index },
column: { id },
updateData,
}: CellProps<T, any>) {
const [value, setValue] = React.useState(initialValue);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
// We'll only update the external data when the input is blurred
const onBlur = () => {
updateData(index, id, value);
};
// If the initialValue is changed external, sync it up with our state
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return (
<input
value={value}
onChange={(event) => onChange(event)}
onBlur={onBlur}
/>
);
}
function EditableCell<T extends object>({
value: initialValue,
row: { index },
column: { id },
updateData,
}: CellProps<T, any>) {
const [value, setValue] = React.useState(initialValue);
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setValue(e.target.value);
};
// We'll only update the external data when the input is blurred
const onBlur = () => {
updateData(index, id, value);
};
// If the initialValue is changed external, sync it up with our state
React.useEffect(() => {
setValue(initialValue);
}, [initialValue]);
return (
<input
value={value}
onChange={(event) => onChange(event)}
onBlur={onBlur}
/>
);
}