Skip to main content
Using Deno in production at your company? Earn free Deno merch.
Give us feedback
Module

x/tui/src/components/mod.ts>Table

🦕 Deno module for creating Terminal User Interfaces
Go to Latest
class Table
extends Component
import { Table } from "https://deno.land/x/tui@2.0.0/src/components/mod.ts";

Component for creating interactive table

Rectangle's width gets automatically calculcated from given headers.

You can specify each header's width explicitly or leave it out to let Table to figure it out.

Examples

Example 1

new Table({
  parent: tui,
  theme: {
    base: crayon.bgBlack.white,
    frame: { base: crayon.bgBlack },
    header: { base: crayon.bgBlack.bold.lightBlue },
    selectedRow: {
      base: crayon.bold.bgBlue.white,
      focused: crayon.bold.bgLightBlue.white,
      active: crayon.bold.bgMagenta.black,
    },
  },
  rectangle: {
    column: 1,
    row: 1,
    height: 10,
  },
  headers: [
    { title: "ID" },
    { title: "Name" },
  ],
  data: [
    ["0", "Thomas Jeronimo"],
    ["1", "Jeremy Wanker"],
    ["2", "Julianne James"],
    ["3", "Tommie Moyer"],
    ["4", "Marta Reilly"],
    ["5", "Bernardo Robertson"],
    ["6", "Hershel Grant"],
  ],
  charMap: "rounded",
  zIndex: 0,
});

Constructors

new
Table(options: TableOptions)

Properties

data: Signal<string[][]>
drawnObjects: { frame: ; header: TextObject; data: TextObject[]; }
headers: Signal<TableHeader<true>[]>
offsetRow: Signal<number>
selectedRow: Signal<number>
theme: TableTheme

Methods

draw(): void
interact(method: "mouse" | "keyboard"): void