ayoub_owl Posts - Answer Overflow

ayoub_owl

•Created by ayoub_owl on 1/11/2023 in #questions

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

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}
    />
  );
};

the table component

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... */}
  );
}

2 replies

TTCTheo's Typesafe Cult

•Created by ayoub_owl on 12/31/2022 in #questions

Next auth session cookie is not set after successful login

20 replies

Gaming

Programming