T
TanStack•3y ago
sensitive-blue

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)[]
Shaglock
CodeSandbox
gracious-dew-ohxds1 - CodeSandbox
gracious-dew-ohxds1 by Shaglock using @tanstack/react-table, react, react-dom, react-scripts
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?