gajus / gajus/table

Alignment for individual cells

Open
#233 0 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
973
Forks
81
PR merge metrics
No merged PRs in 30d

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:

```ts
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:

```ts
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 },
],
};
```

Contributor guide

No contributing guide indexed for this repository

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.