responsive-table.ts

/**
 * Demonstrates how to make a responsive table.
 *
 * Run the example:
 * $ npx esno examples/responsive-table.ts
 */
import { promisify } from 'node:util'
import ansiEscapes from 'ansi-escapes'
import tabletron from '../src'

const tableData = [
   [
      'Jacky',
      'Mapp',
      'Georgian',
      '1992-08-09',
   ],
   [
      'Raphaela',
      'Gaddes',
      'Filipino',
      '1991-07-22',
   ],
   [
      'Mellie',
      'Hassey',
      'Dhivehi',
      '2000-02-06',
   ],
   [
      'Dru',
      'Clout',
      'Thai',
      '1997-09-17',
   ],
   [
      'Sig',
      'Evered',
      'Telugu',
      '1993-12-17',
   ],
   [
      'Velvet',
      'Gambrell',
      'Telugu',
      '1995-10-18',
   ],
   [
      'Alta',
      'Bagenal',
      'Thai',
      '1992-06-03',
   ],
   [
      'Jerrome',
      'Fosten',
      'Kashmiri',
      '2000-09-11',
   ],
   [
      'Derk',
      'Emons',
      'Ndebele',
      '1994-04-30',
   ],
   [
      'Glennis',
      'Patmore',
      'Swati',
      '2000-06-05',
   ],
]

function breakpoints(stdoutColumns: number) {
   // Large screens - auto
   if (stdoutColumns > 100) {
      return [
         {
            width: 'auto',
            paddingLeft: 2,
            paddingRight: 1,
         },
         {
            width: 'auto',
            paddingRight: 1,
         },
         {
            width: 'auto',
            paddingRight: 1,
         },
         {
            width: 'auto',
            paddingRight: 2,
         },
      ]
   }

   // Smaller screens
   if (stdoutColumns > 30) {
      return [
         {
            width: '50%',
            paddingLeft: 2,
            paddingRight: 1,
         },
         {
            width: '50%',
            paddingRight: 2,
         },
         {
            width: '50%',
            paddingLeft: 2,
            paddingRight: 1,
         },
         {
            width: '50%',
            paddingRight: 2,
            paddingBottom: 1,
         },
      ]
   }

   return {
      // Remove responsiveness
      stdoutColumns: 1000,
      columns: [
         {
            width: 'content-width',
            paddingLeft: 2,
            paddingRight: 1,
         },
         {
            width: 'content-width',
            paddingRight: 1,
         },
         {
            width: 'content-width',
            paddingRight: 1,
         },
         {
            width: 'content-width',
            paddingRight: 2,
         },
      ],
   }
}

function renderTable() {
   const table = tabletron(tableData, breakpoints)
   process.stdout.write(ansiEscapes.clearTerminal + table)
}

process.stdout.on('resize', renderTable)
renderTable()

// Keep Node.js from exiting
promisify(setTimeout)(60 * 60 * 1000)