✨ TypeScript

I have rewritten the library in TypeScript and made some improvements to how we handle data internally.

.gitignore

@@ -1,2 +1,6 @@
-/dist/
-/node_modules/
+dist
+node_modules
+coverage
+
+.DS_Store
+*.log*

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "editor.formatOnSave": true
+}

README.md

@@ -18,75 +18,83 @@ import Table from 'ink-table'
 
 const data = [
   {
-    name: "Sosa Saunders",
-    gender: "male",
+    name: 'Sosa Saunders',
+    gender: 'male',
     age: 17,
-    email: "[email protected]",
-    phone: "+1 (809) 435-2786"
+    email: '[email protected]',
+    phone: '+1 (809) 435-2786',
   },
   {
-    name: "Angelina Kirk",
-    gender: "female",
+    name: 'Angelina Kirk',
+    gender: 'female',
     age: 3,
-    email: "[email protected]",
-    phone: "+1 (870) 567-3516"
+    email: '[email protected]',
+    phone: '+1 (870) 567-3516',
   },
   {
-    name: "Bradford Rosales",
-    gender: "male",
+    name: 'Bradford Rosales',
+    gender: 'male',
     age: 20,
-    email: "[email protected]",
-    phone: "+1 (918) 573-3240"
+    email: '[email protected]',
+    phone: '+1 (918) 573-3240',
   },
   {
-    name: "Gwen Schroeder",
-    gender: "female",
+    name: 'Gwen Schroeder',
+    gender: 'female',
     age: 17,
-    email: "[email protected]",
-    phone: "+1 (987) 417-2062"
+    email: '[email protected]',
+    phone: '+1 (987) 417-2062',
   },
   {
-    name: "Ellison Mann",
-    gender: "male",
+    name: 'Ellison Mann',
+    gender: 'male',
     age: 5,
-    email: "[email protected]",
-    phone: "+1 (889) 411-2186"
-  }
-];
+    email: '[email protected]',
+    phone: '+1 (889) 411-2186',
+  },
+]
 
-const Basic = () => (
-  <Table data={data} />
-);
+const Basic = () => <Table data={data} />
 
-render(<Basic />);
+render(<Basic />)
 ```
 
 <img src="media/demo.png" width="720">
 
-## Props
-
-### data `array<object>`
-
-> List of all the values (rows).
-
-### padding `number`
-
-> Offset inside each cell. This is considered one side value (set to 2 will have 2 spaces on the left and on the right - 4 combined).
-
-### header `({children}) => h`
-
-> A component used as header cell. Value is passed as `children` prop.
-> _(Recommend using `<Text/>` with `chalk` props.)_
-
-### cell `({children}) => h`
-
-> A component used as regular cell. Value is passed as `children` prop.
-> _(Recommend using `<Text/>` with `chalk` props.)_
-
-### skeleton `({children}) => h`
-
-> A component used as skeleton (lines and crosses ...). Value is passed as `children` prop.
-> _(Recommend using `<Text/>` with `chalk` props.)_
+## Documentation
+
+```ts
+type ScalarDict = {
+  [key: string]: string | number | boolean | null | undefined
+}
+
+export type TableProps<T extends ScalarDict> = {
+  /**
+   * List of values (rows).
+   */
+  data: T[]
+  /**
+   * Columns that we should display in the table.
+   */
+  columns: (keyof T)[]
+  /**
+   * Cell padding.
+   */
+  padding: number
+  /**
+   * Header component.
+   */
+  header: (props: React.PropsWithChildren<{}>) => JSX.Element
+  /**
+   * Component used to render a cell in the table.
+   */
+  cell: (props: React.PropsWithChildren<{}>) => JSX.Element
+  /**
+   * Component used to render the skeleton of the table.
+   */
+  skeleton: (props: React.PropsWithChildren<{}>) => JSX.Element
+}
+```
 
 ## License
 

codecov.yml

@@ -0,0 +1,5 @@
+coverage:
+  status:
+    project:
+      default:
+        target: 90%

examples/basic.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render } from 'ink'
+
+import Table from '../src'
+
+const data = [
+  {
+    name: 'Sosa Saunders',
+    gender: 'male',
+    company: 'VALREDA',
+    email: '[email protected]',
+    phone: '+1 (809) 435-2786',
+    address: 'Nautilus Avenue, Bentonville, Alabama, 927',
+  },
+  {
+    name: 'Angelina Kirk',
+    gender: 'female',
+    company: 'ZENTILITY',
+    email: '[email protected]',
+    phone: '+1 (870) 567-3516',
+    address: 'Corbin Place, Stevens, Nevada, 6268',
+  },
+  {
+    name: 'Bradford Rosales',
+    gender: 'male',
+    company: 'HYDROCOM',
+    email: '[email protected]',
+    phone: '+1 (918) 573-3240',
+    address: 'Troy Avenue, Martinez, Oklahoma, 1402',
+  },
+]
+
+render(<Table data={data} />)

examples/custom.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import { Text } from 'ink'
+import { render } from 'ink-testing-library'
+
+import Table from '../src'
+
+// Components ----------------------------------------------------------------
+
+const CustomHeader = ({ children }: React.PropsWithChildren<{}>) => (
+  <Text italic color="red">
+    {children}
+  </Text>
+)
+
+const CustomCell = ({ children }: React.PropsWithChildren<{}>) => (
+  <Text bold color="white">
+    {children}
+  </Text>
+)
+
+const CustomSkeleton = ({ children }: React.PropsWithChildren<{}>) => (
+  <Text color="green">{children}</Text>
+)
+
+// Demo ----------------------------------------------------------------------
+
+const data = [
+  {
+    name: 'Sosa Saunders',
+    gender: 'male',
+    company: 'VALREDA',
+    email: '[email protected]',
+    phone: '+1 (809) 435-2786',
+    address: 'Nautilus Avenue, Bentonville, Alabama, 927',
+  },
+  {
+    name: 'Angelina Kirk',
+    gender: 'female',
+    company: 'ZENTILITY',
+    email: '[email protected]',
+    phone: '+1 (870) 567-3516',
+    address: 'Corbin Place, Stevens, Nevada, 6268',
+  },
+  {
+    name: 'Bradford Rosales',
+    gender: 'male',
+    company: 'HYDROCOM',
+    email: '[email protected]',
+    phone: '+1 (918) 573-3240',
+    address: 'Troy Avenue, Martinez, Oklahoma, 1402',
+  },
+  {
+    name: 'Gwen Schroeder',
+    gender: 'female',
+    company: 'KIDGREASE',
+    email: '[email protected]',
+    phone: '+1 (987) 417-2062',
+    address: 'Bainbridge Street, Nogal, Vermont, 1540',
+  },
+]
+
+const { lastFrame } = render(
+  <Table
+    data={data}
+    columns={['name', 'gender']}
+    padding={3}
+    header={CustomHeader}
+    skeleton={CustomSkeleton}
+    cell={CustomCell}
+  />,
+)
+
+console.log(lastFrame())
+
+// ---------------------------------------------------------------------------

jest.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  roots: ['<rootDir>'],
+  testEnvironment: 'node',
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+  },
+  testRegex: '(/tests/.*|(\\.|/)(test|spec))\\.tsx?$',
+  testPathIgnorePatterns: ['/node_modules/', '/__fixtures__/'],
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node'],
+  collectCoverage: true,
+  collectCoverageFrom: [
+    '**/*.tsx$',
+    '**/*.ts$',
+    '!**/bin.ts',
+    '!**/*.d.ts',
+    '!**/dist/**',
+    '!**/node_modules/**',
+  ],
+  verbose: true,
+  coverageDirectory: './coverage',
+  coverageReporters: ['json', 'lcov', 'text', 'clover', 'html'],
+}