voici.js
GitHubTypeDocnpm☕
  • 🏠Home
  • ⚡Quick Start
  • 💡Examples
    • Styling
      • Alignment
      • Colors
      • Border
      • Padding
      • Width
      • Font Style
    • Sorting
    • Highlighting
    • Accumulation
    • Columns
      • Sort Columns
      • Selected Columns
      • Rename Columns
      • Dynamic Columns
    • Arrays
    • Fill Empty
    • Export
    • Typescript
    • Printing
  • 🧩Contributing
  • Reference
    • 📖API Reference
      • AccumulationFunction
      • Config
      • Sort
      • Table
    • ❓FAQ
    • ❗Issues
Powered by GitBook
On this page

Was this helpful?

  1. Examples
  2. Styling

Border

Set a horizontal and vertical border.

You can customize the horizontal and vertical border of the table. Using the border option provide a color, groupSize , horizontal and vertical character.

import { Table } from 'voici.js'

const data = [
  { firstname: 'Homer', lastname: 'Simpson', age: 39 },
  { firstname: 'Marge', lastname: 'Simpson', age: 36 },
  { firstname: 'Bart', lastname: 'Simpson', age: 10 },
  { firstname: 'Lisa', lastname: 'Simpson', age: 8 },
  { firstname: 'Maggie', lastname: 'Simpson', age: 1 }
];

const config = {
  border: {
    groupSize: 2,
    horizontal: '-',
    vertical: '|',
  }
};

const table = new Table(data, config);
table.printPlain();

The output:

|  firstname  |  lastname  |  age  |
====================================
|  Homer      |  Simpson   |  39   |
|  Marge      |  Simpson   |  36   |
------------------------------------
|  Bart       |  Simpson   |  10   |
|  Lisa       |  Simpson   |  8    |
------------------------------------
|  Maggie     |  Simpson   |  1    |

Set groupSize=1 to draw a border after each row.

PreviousColorsNextPadding

Last updated 3 years ago

Was this helpful?

💡