Skip to content

Alignment for individual cells #233

@rschili

Description

@rschili

I would like to align my header cells different from the test of the table. Imagine a table like this:

╔═══════════════════════════╗
║           Title           ║
╟──────┼────────────┼───────╢
║  H1  │     H2     │  H3   ║
╟──────┼────────────┼───────╢
║    1 │ First      │ true  ║
╟──────┼────────────┼───────╢
║    2 │ Second     │ false ║
╚══════╧════════════╧═══════╝

I want the title (using colSpan) to be center aligned. The header captions should also be center aligned.
But the data rows I want to align differently, for example the numeric H1 column should be right aligned.

If I try this with today's logic, I could do something like:

const data = [
  ['Title', '', ''],
  ['H1', 'H2', 'H3'],
  ['1', 'First', 'true'],
  ['2', 'Second', 'false'],
];

const config: TableUserConfig = {
  columns: [
    { alignment: 'right' },
    { alignment: 'left' },
    { alignment: 'left' },
  ],
  spanningCells: [
    { col: 0, row: 0, colSpan: 3 },
  ],
};

console.log(table(data, config));

But now, H1 and the title would be right aligned.

╔═════════════════════╗
║               Title ║
╟────┬────────┬───────╢
║ H1 │ H2     │ H3    ║
╟────┼────────┼───────╢
║  1 │ First  │ true  ║
╟────┼────────┼───────╢
║  2 │ Second │ false ║
╚════╧════════╧═══════╝

Suggestion

I could imagine an additional config like this:

const config: TableUserConfig = {
  columns: [
    { alignment: 'right' },
    { alignment: 'left' },
    { alignment: 'left' },
  ],
  cellOverrides: [
    { row: 0, col: 0, alignment: 'center' }
    { row: 1, alignment: 'center' }
  ],
  spanningCells: [
    { col: 0, row: 0, colSpan: 3 },
  ],
};

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions