columnHelper header type

Hello guys,
I am trying to map all my columns headers into array and expect to get array of strings, but this is not the case.

Here is the code sandbox repro
https://codesandbox.io/s/gracious-dew-ohxds1?file=/src/App.tsx

Is there any step I missed or its impossible to do right now?

import { createColumnHelper } from "@tanstack/react-table";

interface TableData {
  name: string;
  label: "organization";
}

const columnHelper = createColumnHelper<TableData>();
const labelColumn = columnHelper.accessor("label", {
  header: "Label Header Name"
});
const header = labelColumn.header;
// Why header can be undefined if I provided it string "Label Header Name"?
// const header: ColumnDefTemplate<HeaderContext<TableData, "organization">> | undefined
const columns = [
  labelColumn,
  columnHelper.accessor("name", {
    header: "Name"
  })
];

// Why headers are not array of string?
const headers = columns.map((column) => column.header);
// const headers: (string | ((props: HeaderContext<TableData, "organization">) => any) | ((props: HeaderContext<TableData, string>) => any) | undefined)[]

import { createColumnHelper } from "@tanstack/react-table";

interface TableData {
  name: string;
  label: "organization";
}

const columnHelper = createColumnHelper<TableData>();
const labelColumn = columnHelper.accessor("label", {
  header: "Label Header Name"
});
const header = labelColumn.header;
// Why header can be undefined if I provided it string "Label Header Name"?
// const header: ColumnDefTemplate<HeaderContext<TableData, "organization">> | undefined
const columns = [
  labelColumn,
  columnHelper.accessor("name", {
    header: "Name"
  })
];

// Why headers are not array of string?
const headers = columns.map((column) => column.header);
// const headers: (string | ((props: HeaderContext<TableData, "organization">) => any) | ((props: HeaderContext<TableData, string>) => any) | undefined)[]

import { createColumnHelper } from "@tanstack/react-table";

interface TableData {
  name: string;
  label: "organization";
}

const columnHelper = createColumnHelper<TableData>();
const labelColumn = columnHelper.accessor("label", {
  header: "Label Header Name"
});
const header = labelColumn.header;
// Why header can be undefined if I provided it string "Label Header Name"?
// const header: ColumnDefTemplate<HeaderContext<TableData, "organization">> | undefined
const columns = [
  labelColumn,
  columnHelper.accessor("name", {
    header: "Name"
  })
];

// Why headers are not array of string?
const headers = columns.map((column) => column.header);
// const headers: (string | ((props: HeaderContext<TableData, "organization">) => any) | ((props: HeaderContext<TableData, string>) => any) | undefined)[]

import { createColumnHelper } from "@tanstack/react-table";

interface TableData {
  name: string;
  label: "organization";
}

const columnHelper = createColumnHelper<TableData>();
const labelColumn = columnHelper.accessor("label", {
  header: "Label Header Name"
});
const header = labelColumn.header;
// Why header can be undefined if I provided it string "Label Header Name"?
// const header: ColumnDefTemplate<HeaderContext<TableData, "organization">> | undefined
const columns = [
  labelColumn,
  columnHelper.accessor("name", {
    header: "Name"
  })
];

// Why headers are not array of string?
const headers = columns.map((column) => column.header);
// const headers: (string | ((props: HeaderContext<TableData, "organization">) => any) | ((props: HeaderContext<TableData, string>) => any) | undefined)[]

CodeSandboxShaglock

gracious-dew-ohxds1 - CodeSandbox

gracious-dew-ohxds1 by Shaglock using @tanstack/react-table, react, react-dom, react-scripts

No replies yetBe the first to reply to this messageJoin

columnHelper header type

Similar Threads

Similar Threads

Similar Threads