feat: Teach Table to render top grouping headers

[nulltoken]

👀What is this pr about?

Partially fix #472.

Reuses the internal rendering mechanism to leverage existing features and benefit from existing test coverage.

Implementation favored a design which is as less invasive as possible with regards to the current code.

Pending topics:

• [ ] Adding documentation to console-table-printer/console-table-docu

Potential future features:

• Support coloring grouped headers (cannot be easily done in the scope of that PR)
• Allow true dynamic resizing (cf. test should cope with very long group names)

🚀 Changes

Added

• [x] New Table option: groupedColumnsHeaders

🖼 Screenshots

const table = new Table({
  groupedColumnsHeaders: [
    { name: 'G1', width: 9 }
]});

    ┌──────────────────────────────────────────────────────┐
    │                          G1                          │
    ├────┬────┬────┬─────────┬────┬────┬────┬────┬─────────┤
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { name: 'G1', width: 2 },
    { name: 'G2', width: 2 },
    { name: 'G3', width: 5 },
]});

    ┌─────────┬──────────────┬─────────────────────────────┐
    │   G1    │      G2      │             G3              │
    ├────┬────┼────┬─────────┼────┬────┬────┬────┬─────────┤
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { kind: 'PLACEHOLDER', width: 1 },
    { name: 'G1', width: 2 },
    { name: 'G2', width: 2 },
    { name: 'G3', width: 4 },
]});

         ┌─────────┬──────────────┬────────────────────────┐
         │   G1    │      G2      │           G3           │
    ┌────┼────┬────┼─────────┬────┼────┬────┬────┬─────────┤
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { name: 'G1', width: 2 },
    { name: 'G2', width: 2 },
    { name: 'G3', width: 4 },
]});

    ┌─────────┬──────────────┬───────────────────┐
    │   G1    │      G2      │        G3         │
    ├────┬────┼────┬─────────┼────┬────┬────┬────┼─────────┐
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { name: 'G1', width: 2 },
    { name: 'G2', width: 2 },
    { kind: 'PLACEHOLDER', width: 1 },
    { name: 'G3', width: 4 },
]});

    ┌─────────┬──────────────┐    ┌────────────────────────┐
    │   G1    │      G2      │    │           G3           │
    ├────┬────┼────┬─────────┼────┼────┬────┬────┬─────────┤
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { kind: 'PLACEHOLDER', width: 1 },
    { name: 'G1', width: 2 },
    { kind: 'PLACEHOLDER', width: 1 },
    { name: 'G2', width: 2 },
    { name: 'G3', width: 2 },
]});

         ┌─────────┐         ┌─────────┬─────────┐
         │   G1    │         │   G2    │   G3    │
    ┌────┼────┬────┼─────────┼────┬────┼────┬────┼─────────┐
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { kind: 'PLACEHOLDER', width: 5 },
    { name: 'G1', width: 2 },
]});

                                  ┌─────────┐
                                  │   G1    │
    ┌────┬────┬────┬─────────┬────┼────┬────┼────┬─────────┐
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { kind: 'PLACEHOLDER', width: 7 },
    { name: 'VERY LONG GROUP NAME', width: 2 },
]});

                                            ┌──────────────┐
                                            │  VERY LONG   │
    ┌────┬────┬────┬─────────┬────┬────┬────┼────┬─────────┤
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

---
const table = new Table({
  groupedColumnsHeaders: [
    { name: 'LEFT', alignment: 'left', width: 2 },
    { name: 'RIGHT', alignment: 'right', width: 2 },
]});

    ┌─────────┬──────────────┐                                                                                     
    │ LEFT    │        RIGHT │                            
    ├────┬────┼────┬─────────┼────┬────┬────┬────┬─────────┐
    │  A │  B │  C │       D │  E │  F │  G │  H │       I │
    ├────┼────┼────┼─────────┼────┼────┼────┼────┼─────────┤
    │ A1 │ B1 │ C1 │      D1 │ E1 │ F1 │ G1 │ H1 │ I 00001 │
    │ A2 │ B2 │ C2 │ D 00002 │ E2 │ F2 │ G2 │ H2 │      I2 │
    └────┴────┴────┴─────────┴────┴────┴────┴────┴─────────┘

[codecov[bot]]

Codecov Report

:x: Patch coverage is 96.96970% with 5 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/internalTable/grouped-column-headers.ts	96.75%	1 Missing and 4 partials :warning:

:loudspeaker: Thoughts on this report? Let us know!

[nulltoken]

@ayonious Thoughts?

[ayonious]

I will take some time to review this. Maybe around a week. But the feature looks good.

[ayonious]

I would also suggest to add more tests like test/features/groupedColumnHeaders

[nulltoken]

I would also suggest to add more tests like test/features/groupedColumnHeaders

@ayonious Will do.

Although I'm not sure what is the proper balance between what's expected to live under test/features/groupedColumnHeaders/render.tests vs test/render.tests.

Will push something and let you decide ;-)

[nulltoken]

Will push something and let you decide ;-)

Done.

Moved everything under test/features/ and added one global rendering test in test/render.tests.ts

[nulltoken]

@ayonious rebased

[ayonious]

Im thinking about some special cases

1. with calculated columns
2. With columns that are far from each other but belongs to same parent column
3. group of groups

And with this solution, column headers need to be in same order as the other columns, means columns actually have to have a strict serial.

So although this is a nice partial solution its complication makes it hard for me to allow this in the package.

If there is something simpler and more effective I can take a look. Lets first maybe brainstorm and see if we can come up with something simpler.

[nulltoken]

Lets first maybe brainstorm and see if we can come up with something simpler.

That's the simplest I've been able to come with. How would you approach it?

[ayonious]

Instead of grouping serially with widths, I think its more correct grouping them with the ids.

groupedColumnsHeaders: [{
   childIds: 'col1', 'col2'
   id: 'title1'
   title: 'Title1'
}]

[nulltoken]

@ayonious Thanks for the feedback. Let me see what I can come up with.

[nulltoken]

@ayonious Thanks for the feedback. Let me see what I can come up with.

@ayonious Here's a new version exposing a column name based aggregation definition.

Thoughts?

[nulltoken]

Note: In order to make your review easier, I've pushed my changes in a fixup commit.

[nulltoken]

my changes in a fixup commit

@ayonious Thoughts?

[nulltoken]

@ayonious Here's a new version exposing a column name based aggregation definition.

@ayonious Have you had the time to take a look at the proposal yet?

[nulltoken]

@ayonious Kind bump?