primary-violet

Table columns typing issue

Hi people, It's my first time using typescript on a big project, and especially because I generally don't use many component packages, so I'm really just confused on what type I should be using.

  const columnHelper = createColumnHelper<Case>();

  const columns = [
    columnHelper.accessor('caseId', {
      header: 'Case',
      cell: (info) => info.getValue().toString(),
    }),
    columnHelper.accessor('name', {
      header: 'Name',
    }),
    columnHelper.accessor('startDate', {
      header: 'Start Date',
    }),
    columnHelper.accessor('endDate', {
      header: 'End Date',
    }),
    columnHelper.accessor('paymentRequired', {
      header: 'Payment Required',
    }),
    columnHelper.accessor('status', {
      header: 'Status',
    }),
  ];

  const columnHelper = createColumnHelper<Case>();

  const columns = [
    columnHelper.accessor('caseId', {
      header: 'Case',
      cell: (info) => info.getValue().toString(),
    }),
    columnHelper.accessor('name', {
      header: 'Name',
    }),
    columnHelper.accessor('startDate', {
      header: 'Start Date',
    }),
    columnHelper.accessor('endDate', {
      header: 'End Date',
    }),
    columnHelper.accessor('paymentRequired', {
      header: 'Payment Required',
    }),
    columnHelper.accessor('status', {
      header: 'Status',
    }),
  ];

but I get a type error when trying to use it in a <table /> component I made (which expects a columnDef<Case> type);

and hovering over the columns array didn't really help me understand what type I should be expecting it to be.

const columns: ((AccessorKeyColumnDefBase<Case, number> & Partial<IdIdentifier<Case, number>>) | (AccessorKeyColumnDefBase<Case, string> & Partial<...>) | (AccessorKeyColumnDefBase<...> & Partial<...>))[]

any help is greatly appreciated !!

TanStack•2y ago

primary-violet

Table columns typing issue

Hi people, It's my first time using typescript on a big project, and especially because I generally don't use many component packages, so I'm really just confused on what type I should be using.

  const columnHelper = createColumnHelper<Case>();

  const columns = [
    columnHelper.accessor('caseId', {
      header: 'Case',
      cell: (info) => info.getValue().toString(),
    }),
    columnHelper.accessor('name', {
      header: 'Name',
    }),
    columnHelper.accessor('startDate', {
      header: 'Start Date',
    }),
    columnHelper.accessor('endDate', {
      header: 'End Date',
    }),
    columnHelper.accessor('paymentRequired', {
      header: 'Payment Required',
    }),
    columnHelper.accessor('status', {
      header: 'Status',
    }),
  ];

  const columnHelper = createColumnHelper<Case>();

  const columns = [
    columnHelper.accessor('caseId', {
      header: 'Case',
      cell: (info) => info.getValue().toString(),
    }),
    columnHelper.accessor('name', {
      header: 'Name',
    }),
    columnHelper.accessor('startDate', {
      header: 'Start Date',
    }),
    columnHelper.accessor('endDate', {
      header: 'End Date',
    }),
    columnHelper.accessor('paymentRequired', {
      header: 'Payment Required',
    }),
    columnHelper.accessor('status', {
      header: 'Status',
    }),
  ];

Table columns typing issue

Similar Threads

Table columns typing issue

Similar Threads

Similar Threads

Similar Threads