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
  • Type Information
  • Config

Was this helpful?

  1. Examples

Typescript

voici.js in combination with Typescript.

Type Information

When using Typescript you can provide the type of the dataset rows using the diamond <> operator.

import { Table } from 'voici.js'

interface IPerson {
  firstname: string;
  lastname: string;
  age: number;
}

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 table = new Table<IPerson>(data);

Here, table.dataset is of type Person[].

If you have nointerfacedeclared, you can still provide the type of your dataset by using new Table<(typeof data)[number]>.

Config

When declaring a config variable you might have to set the according type.

import { Table, Config } from 'voici.js'

const data = [
  { firstname: 'Marge', lastname: 'Simpson', age: 36 },
  { firstname: 'Homer', lastname: 'Simpson', age: 39 },
  { firstname: 'Peter', lastname: 'Griffin', age: 42 },
  { firstname: 'Lois', lastname: 'Griffin', age: 43 }
];

const config: Config = { // Set type 'Config'
  order: {
    columns: ['lastname'],
    directions: ['asc']
  }
};

const table = new Table(data, config);
PreviousExportNextPrinting

Last updated 2 years ago

Was this helpful?

💡