A table component for Ink.
npm install ink-tableimport Table from "ink-table";
const data = [
{
name: "Sosa Saunders",
gender: "male",
age: 17,
email: "[email protected]",
phone: "+1 (809) 435-2786"
},
{
name: "Angelina Kirk",
gender: "female",
age: 3,
email: "[email protected]",
phone: "+1 (870) 567-3516"
},
{
name: "Bradford Rosales",
gender: "male",
age: 20,
email: "[email protected]",
phone: "+1 (918) 573-3240"
},
{
name: "Gwen Schroeder",
gender: "female",
age: 17,
email: "[email protected]",
phone: "+1 (987) 417-2062"
},
{
name: "Ellison Mann",
gender: "male",
age: 5,
email: "[email protected]",
phone: "+1 (889) 411-2186"
}
];
const Basic = () => <Table data={data} />;
render(<Basic />);
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;
};MIT © Matic Zavadlal