/** * 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 { terminalColumns } 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', ], ]; const 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, }, ], }; }; const renderTable = () => { const table = terminalColumns(tableData, breakpoints); process.stdout.write(ansiEscapes.clearTerminal + table); }; process.stdout.on('resize', renderTable); renderTable(); // Keep Node.js from exiting promisify(setTimeout)(60 * 60 * 1000);