Tables: Allow separate field and title for columns

[kgar]

Currently, when I want to make human readable columns from data with camelCase properties, I have to perform a mapping step. See this recipe in the cookbook.

The upgrade

As a ts-markdown user, I would like to be able to specify the field which a column refers to in the data.

Given this input:

// Given some external data
const data = [
  {
    firstName: 'Fred',
    lastName: 'Flintstone',
    age: 100000000,
  },
  {
    firstName: 'Saitama',
    lastName: null,
    age: 25,
  },
  {
    firstName: 'Miles',
    lastName: 'Morales',
    age: 17,
  },
];

const myTable = {
  table: {
    columns: [
        { name: 'First Name', field: 'firstName' },  // 👈 'firstName' matches the property in `data`
        { name: 'Last Name', field: 'lastName' },  // 👈 'lastName' matches the property in `data`
        { name: 'Age', field: 'age' }], // 👈 'age' matches the property in `data`
    rows: myRows,
  },
};

I would expect this output:

| First Name | Last Name  | Age       |
| ---------- | ---------- | --------- |
| Fred       | Flintstone | 100000000 |
| Saitama    |            | 25        |
| Miles      | Morales    | 17        |

Defaults

When a field is not specified, the column name is used for accessing the data from the object.

TypeScript bonus content

For those who want it, it would be nice to be able to reference a generic version of the TableEntry which will provide TypeScript property name checking on the data set when specifying fields on the column, when fields are provided. When a field isn't provided on a column, then the typing would perform the same check on the name property.

[kgar]

If this is implemented, update the cookbook so that the mapping step is not required.

[kgar]

Accidentally pushed straight to main branch. Oops! I'll lock things down a bit more. But yet, this feature has been implemented 😞