DataTable: typings for headers and rows

[albertms10]

It would be great if the display and sort method’s parameter types were automatically inferred, somehow.
It seems tricky, as having both rows and headers types related would create a circular dependency.

// Typing `headers` with `rows` objects data
const headers = [
  // ...
  {
    key: "quantity",
    value: "Quantity",
    display: (quantity: rows[number]["quantity"]) => quantity + " €",
  },
  {
    key: "date",
    value: "Date",
    display: (date: rows[number]["date"]) => new Date(date).toLocaleString(),
    sort: (a: rows[number]["date"], b: rows[number]["date"]) => new Date(a) - new Date(b),
  },
];

But, in order to force the rows array to have objects with a set of keys defined in headers:

// Typing `rows` with a `headersList` array
const headersList = ["name", "quantity", "date"] as const;

type DataTableRows = {
  [P in typeof headersList[number] | "id"]: string;
};

const rows: DataTableRows = [
  {
    id: 1,
    nam: "John", // Will trigger a TS error
    quantity: 157.89,
    date: "2020-10-21",
  },
];

[albertms10]

@albertms10 For the TypeScript comment, I'm not sure how it would be automatically inferred without typing it. Would typing headers as a tuple work?

Something like:

const headers: [{key: "quantity", value: "Quantity", display: (quantity: number) => string;}] = [{
  key: "quantity",
  value: "Quantity",
  display: (quantity: number) => `${quantity} €`,
}]

Answering #356 (comment), having an interface like the following would allow typing the headers array this way:

interface Header<T = unknown> {
  key: string;
  value: string;
  display?: (value: T) => string;
  sort?: (a: T, b: T) => number;
}

const headers: [Header<string>, Header<number>, Header<string>] = [
  {
    key: "name",
    value: "Name",
  },
  {
    key: "quantity",
    value: "Quantity",
    display: (quantity) => quantity + " €",
  },
  {
    key: "date",
    value: "Date",
    display: (date) => new Date(date).toLocaleString(),
    sort: (a, b) => new Date(a) - new Date(b),
  },
];