Description:

barbecue

barbecue #



Render text tables for CLI-based dart applications.
Ported from Kotlin to Dart from Jake Wharton's picnic.
Features:

Borders (with custom styling)
Padding
Styling on table- row- or cell-level
Text alignment (bottom/middle/top - left/middle/right)
Row and column spans
ANSI Colors and backgrounds! (see example)
LIMITED support for emojis and other wide characters

Examples #
Simple example:

print(Table(
tableStyle: TableStyle(border: true),
header: TableSection(rows: [
Row(
cells: [
Cell("ID"),
Cell("Name"),
Cell("Role"),
],
cellStyle: CellStyle(borderBottom: true),
),
]),
body: TableSection(
cellStyle: CellStyle(paddingRight: 2),
rows: [
Row(cells: [
Cell("42", style: CellStyle(alignment: TextAlignment.TopRight)),
Cell("John Doe"),
Cell("Secret Agent")
]),
Row(cells: [
Cell("4711"),
Cell("Leanna E. Distefano"),
Cell("Customer Support")
]),
Row(cells: [Cell("1337"), Cell("Patrice Miller"), Cell("Accountant")])
],
)).render());
copied to clipboard
Prints:
┌─────────────────────────────────────────────┐
│ID Name Role │
├─────────────────────────────────────────────┤
│ 42 John Doe Secret Agent │
│4711 Leanna E. Distefano Customer Support │
│1337 Patrice Miller Accountant │
└─────────────────────────────────────────────┘
copied to clipboard
Text Align + Spans + ASCII style border #

Table(
cellStyle: CellStyle(
borderBottom: true,
borderRight: true,
borderLeft: true,
borderTop: true,
alignment: TextAlignment.TopLeft),
body: TableSection(
rows: [
Row(
cells: [
Cell("Real Planets",
rowSpan: 8,
style: CellStyle(alignment: TextAlignment.MiddleCenter)),
Cell("Mercury")
],
),
Row(
cells: [Cell("Venus")],
),
Row(
cells: [Cell("Earth")],
),
Row(
cells: [Cell("Mars")],
),
Row(
cells: [Cell("Jupiter")],
),
Row(
cells: [Cell("Saturn")],
),
Row(
cells: [Cell("Uranus")],
),
Row(
cells: [Cell("Neptune")],
),
Row(
cells: [Cell("Very Fake Planets", rowSpan: 1), Cell("Pluto")],
),
],
),
).render(border: TextBorder.ASCII)

copied to clipboard
returns
+-----------------+-------+
| |Mercury|
| +-------+
| |Venus |
| +-------+
| |Earth |
| +-------+
| |Mars |
| Real Planets +-------+
| |Jupiter|
| +-------+
| |Saturn |
| +-------+
| |Uranus |
| +-------+
| |Neptune|
+-----------------+-------+
|Very Fake Planets|Pluto |
+-----------------+-------+

copied to clipboard
ANSI colors #
final strings = ["look", "at", "all", "these", "colors"];
var i = 0;
print(Table(
tableStyle: TableStyle(border: true),
body: TableSection(
cellStyle: CellStyle(
borderRight: true,
),
rows: [
Row(
cells: [
for (final pen in [
AnsiPen()
..red(bold: true),
AnsiPen()
..green(bold: true),
AnsiPen()..blue(),
AnsiPen()
..black()
..white(bg: true),
AnsiPen()..xterm(190)
])
Cell(pen(strings[i++]))
],
),
]),
).render());


copied to clipboard
prints

Emojis and other wide characters #
By default, the layout algorithm assumes a real monospaced font, where every character is the exact same
width as other characters. Most modern "Mono" fonts don't work like that.
See for example this "monospaced" block:
😊😊😊
123
copied to clipboard
In a fully monospaced font, the first line with the emojis would be exactly as wide as the second line.
Chances are, that you see this block rendered like this (this depends on the font used):

Text based table layouts don't work if some characters are wider than others.
Luckily, most fonts used in terminals just render most emojis twice as wide as other characters:
Something like:
😊😊😊|
123456|
copied to clipboard
Will likely render like that in your terminal:

With the assumption that emojis are rendered twice as wide, we can build a valid text-table again.
Unfortunately, this is not going to work with all fonts, and not with all characters.
Some characters are rendered with a fractional width of a default character.
See for example bold unicode characters:
𝗛𝗲𝗮𝗱𝗲𝗿|
123456|
copied to clipboard
For emojis and other wide characters, you can use the experimental EmojiAwareLayout.
Example:
final table = Table(
body: TableSection(rows: [
Row(cells: [
Cell('🤡',
columnSpan: 4,
style: CellStyle(alignment: TextAlignment.MiddleCenter)),
]),
Row(cells: [
Cell(
'1',
),
Cell(
'2',
),
Cell(
'3',
),
Cell(
'4',
),
])
]));
final tableString = table.render(layoutFactory: (cell) => EmojiAwareLayout(cell));
copied to clipboard
Your milage may wary. It is recommended not to use any unicode full-width or half-width characters
with barbecue, as there are many platform, font or even terminal specific differences in how
their glyphs are rendered, and this breaks the monospace-assumption of this package.
There is no way of drawing text tables if the glyphs are rendered with fractional widths of 1.5x.

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter