or run

npx @tessl/cli init
Log in

Version

Tile

Overview

Evals

Files

docs

cell-formatting.mddata-management.mdindex.mdstyling-layout.mdtable-configuration.md
tile.json

data-management.mddocs/

Data Management

Array-based interface for adding, removing, and modifying table data with support for horizontal, vertical, and cross table layouts.

Capabilities

Array Methods

Table instances extend Array and inherit all standard array methods for data manipulation.

/**
 * Add rows to the end of the table
 * @param rows - Row data to append
 * @returns New length of the table
 */
push(...rows: TableRow[]): number;

/**
 * Add rows to the beginning of the table
 * @param rows - Row data to prepend
 * @returns New length of the table
 */
unshift(...rows: TableRow[]): number;

/**
 * Remove and/or add rows at a specific position
 * @param start - Index to start modification
 * @param deleteCount - Number of rows to remove
 * @param items - New rows to insert
 * @returns Array of removed rows
 */
splice(start: number, deleteCount?: number, ...items: TableRow[]): TableRow[];

/**
 * Remove and return the last row
 * @returns The removed row or undefined
 */
pop(): TableRow | undefined;

/**
 * Remove and return the first row
 * @returns The removed row or undefined
 */
shift(): TableRow | undefined;

Table Row Types

Different row formats for various table layouts.

type TableRow = HorizontalTableRow | VerticalTableRow | CrossTableRow;

/** Array of cells for standard horizontal tables */
type HorizontalTableRow = Cell[];

/** Object with string keys for vertical tables */
interface VerticalTableRow {
  [name: string]: Cell;
}

/** Object with string keys and cell arrays for cross tables */
interface CrossTableRow {
  [name: string]: Cell[];
}

/** Cell content or advanced cell configuration */
type Cell = CellValue | CellOptions;
type CellValue = boolean | number | bigint | string | null | undefined;

Table Layout Types

Horizontal Tables

Standard row-and-column layout with optional headers.

Usage Examples:

const Table = require('cli-table3');

const table = new Table({
  head: ['Name', 'Age', 'City']
});

// Add single row
table.push(['Alice Johnson', 28, 'New York']);

// Add multiple rows
table.push(
  ['Bob Smith', 35, 'Los Angeles'],
  ['Carol Davis', 42, 'Chicago']
);

console.log(table.toString());
// ┌──────────────┬─────┬─────────────┐
// │ Name         │ Age │ City        │
// ├──────────────┼─────┼─────────────┤
// │ Alice Johnson│ 28  │ New York    │
// ├──────────────┼─────┼─────────────┤
// │ Bob Smith    │ 35  │ Los Angeles │
// ├──────────────┼─────┼─────────────┤
// │ Carol Davis  │ 42  │ Chicago     │
// └──────────────┴─────┴─────────────┘

Vertical Tables

Key-value pair layout where each row is an object with named properties.

Usage Examples:

const table = new Table();

// Add key-value pairs
table.push(
  { 'Name': 'Alice Johnson' },
  { 'Age': 28 },
  { 'City': 'New York' },
  { 'Email': 'alice@example.com' }
);

console.log(table.toString());
// ┌───────┬──────────────────┐
// │ Name  │ Alice Johnson    │
// ├───────┼──────────────────┤
// │ Age   │ 28               │
// ├───────┼──────────────────┤
// │ City  │ New York         │
// ├───────┼──────────────────┤
// │ Email │ alice@example.com│
// └───────┴──────────────────┘

// Multiple key-value pairs in one row
table.push({
  'Phone': '555-0123',
  'Status': 'Active'
});

Cross Tables

Two-dimensional layout with both row and column headers.

Usage Examples:

const table = new Table({
  head: ['', 'January', 'February', 'March']
});

// Add rows with left headers and multiple columns
table.push(
  { 'Sales': ['$12,000', '$15,000', '$18,000'] },
  { 'Expenses': ['$8,000', '$9,500', '$11,000'] },
  { 'Profit': ['$4,000', '$5,500', '$7,000'] }
);

console.log(table.toString());
// ┌──────────┬─────────┬──────────┬─────────┐
// │          │ January │ February │ March   │
// ├──────────┼─────────┼──────────┼─────────┤
// │ Sales    │ $12,000 │ $15,000  │ $18,000 │
// ├──────────┼─────────┼──────────┼─────────┤
// │ Expenses │ $8,000  │ $9,500   │ $11,000 │
// ├──────────┼─────────┼──────────┼─────────┤
// │ Profit   │ $4,000  │ $5,500   │ $7,000  │
// └──────────┴─────────┴──────────┴─────────┘

Data Manipulation

Adding Data

const table = new Table({ head: ['Product', 'Price'] });

// Single row
table.push(['Laptop', '$999']);

// Multiple rows
table.push(
  ['Mouse', '$29'],
  ['Keyboard', '$79']
);

// Using unshift to add at beginning
table.unshift(['Monitor', '$299']);

// Using splice to insert at specific position
table.splice(2, 0, ['Speakers', '$149']);

Removing Data

// Remove last row
const lastRow = table.pop();

// Remove first row
const firstRow = table.shift();

// Remove specific rows
const removed = table.splice(1, 2); // Remove 2 rows starting at index 1

// Clear all data
table.length = 0;
// or
table.splice(0);

Modifying Data

// Direct index access
table[0] = ['Updated Product', '$1099'];

// Modify specific cell (for horizontal tables)
table[1][0] = 'New Product Name';

// For vertical tables
table[0] = { 'Product': 'Updated Product', 'Price': '$1099' };

// For cross tables
table[0] = { 'Q1': ['$10K', '$12K', '$15K'] };

Data Validation

The library automatically handles type conversion and validation:

// Supported cell value types
table.push([
  'String content',           // string
  42,                        // number
  true,                      // boolean
  BigInt(123456789012345),   // bigint
  null,                      // null
  undefined                  // undefined
]);

// Invalid types will throw errors during rendering
try {
  table.push([{ invalid: 'object' }]);
  table.toString(); // Throws error
} catch (error) {
  console.error('Invalid cell content');
}

Array Property Access

Since Table extends Array, all standard array properties are available:

// Get table length
console.log(table.length);

// Check if empty
if (table.length === 0) {
  console.log('Table is empty');
}

// Access rows by index
const firstRow = table[0];
const lastRow = table[table.length - 1];

// Iterate over rows
table.forEach((row, index) => {
  console.log(`Row ${index}:`, row);
});

// Use array methods
const filteredTable = table.filter(row => /* condition */);
const mappedTable = table.map(row => /* transformation */);