-
-
Notifications
You must be signed in to change notification settings - Fork 79
Open
Description
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
Labels
No labels