maticzav / ink-table Goto Github PK

When I render a table, I got a warning message for every middle line inserted between elements of the data array (Minus one).

Warning: Encountered two children with the same key, `mid`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted
— the behavior is unsupported and could change in a future version.
    in span (created by Table)
    in Table (created by App)
    in App

I have a fix for this issue, I will make a PR.

Hello @maticzav

I'm getting this error when adding a Table component to the render tree and the exit() method is called (Ctrl-C).

My deps:

    "ink": "^0.5.0",
    "ink-table": "^1.0.0"

Code:

import { h, render, Component, Color } from 'ink'
import Table from 'ink-table'

class Hello extends Component {
  state = {
    counter: 0,
    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'}
    ]
  }
  
  componentDidMount() {
		this.timer = setInterval(() => {
      const { counter } = this.state
			this.setState({
				counter: this.state.counter + 1
			});
		}, 100);
	}

	componentWillUnmount() {
		clearInterval(this.timer);
	}

  render () {
    const { counter, data } = this.state
    return (
      <div>
        <Color blue>{counter}</Color>
        <br/>
        <Table data={data} />
      </div>
    )
  }
}

render(<Hello />)

TypeError: Cannot read property 'componentWillUnmount' of null
    at componentWillUnmount (webpack:///./node_modules/ink/lib/diff.js?:89:18)
    at unmount (webpack:///./node_modules/ink/lib/diff.js?:95:3)
    at diff (webpack:///./node_modules/ink/lib/diff.js?:119:4)
    at vnode.children.forEach.childVNode (webpack:///./node_modules/ink/lib/diff.js?:100:3)
    at Array.forEach (<anonymous>)
    at unmount (webpack:///./node_modules/ink/lib/diff.js?:99:17)
    at diff (webpack:///./node_modules/ink/lib/diff.js?:119:4)
    at vnode.children.forEach.childVNode (webpack:///./node_modules/ink/lib/diff.js?:100:3)
    at Array.forEach (<anonymous>)
    at unmount (webpack:///./node_modules/ink/lib/diff.js?:99:17)

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

Invalid npm token.

The npm token configured in the NPM_TOKEN environment variable must be a valid token allowing to publish to the registry https://registry.npmjs.org/.

If you are using Two-Factor Authentication, make configure the auth-only level is supported. semantic-release cannot publish with the default auth-and-writes level.

Please make sure to set the NPM_TOKEN environment variable in your CI with the exact value of the npm token.

Good luck with your project ✨

Your semantic-release bot 📦🚀

As #31 (comment) and vadimdemedes/ink#168 (comment) mentioned.

Current behaviour

When the contents of the table are more than terminal width, the rows overflow to multiple lines

when I tried to use it on this project slaweet/calcGithubMetrics@143db89

Expected behaviour

There should be a way to ensure this won't happen.

I would expect to be able to specify how wrapping should be handled - something like <Box textWrap={...} > https://github.com/vadimdemedes/ink#wrapping

Not sure what should be the default wrapping and what other options can be provided, but the current behaviour definitely looks like a bug.

Note: I was trying to make the wrapping work with custom cell and skeleton props of Table, but I wasn't successful. Please let me know if there already is a way to do this.

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/XXXX/fe-material-monorepo/node_modules/.pnpm/ink@4.2.0_@types[email protected][email protected]/node_modules/ink/build/index.js from /Users/XXXX.fe-material-monorepo/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/ink-table/dist/index.js not supported.

🚨 The automated release from the master branch failed. 🚨

I recommend you give this issue a high priority, so other packages depending on you could benefit from your bug fixes and new features.

You can find below the list of errors reported by semantic-release. Each one of them has to be resolved in order to automatically publish your package. I’m sure you can resolve this 💪.

Errors are usually caused by a misconfiguration or an authentication problem. With each error reported below you will find explanation and guidance to help you to resolve it.

Once all the errors are resolved, semantic-release will release your package the next time you push a commit to the master branch. You can also manually restart the failed CI job that runs semantic-release.

If you are not sure how to resolve this, here is some links that can help you:

• Usage documentation
• Frequently Asked Questions
• Support channels

If those don’t help, or if this issue is reporting something you think isn’t right, you can always ask the humans behind semantic-release.

The push permission to the Git repository is required.

semantic-release cannot push the version tag to the branch master on remote Git repository.

Please refer to the authentication configuration documentation to configure the Git credentials on your CI environment.

Good luck with your project ✨

Your semantic-release bot 📦🚀

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Open

These updates have all been created already. Click a checkbox below to force a retry/rebase of any.

• chore(deps): update actions/setup-node action to v4
• chore(deps): update dependency @types/node to v20
• chore(deps): update dependency husky to v9
• chore(deps): update dependency ink to v4
• chore(deps): update dependency ink-testing-library to v3
• chore(deps): update dependency prettier to v3
• chore(deps): update dependency pretty-quick to v4
• chore(deps): update dependency typescript to v5
• Click on this checkbox to rebase all open PRs at once

Ignored or Blocked

These are blocked by an existing closed PR and will not be recreated unless you click a checkbox below.

• chore(deps): update dependency @types/node to v14.18.63
• chore(deps): update dependency prettier to v2.8.8
• chore(deps): update dependency typescript to v4.9.5
• fix(deps): update dependency object-hash to v2.2.0
• chore(deps): update dependency ts-node to v10
• chore(deps): update jest monorepo to v29 (major) (@types/jest, jest, ts-jest)
• chore(deps): update react monorepo to v18 (major) (@types/react, react)
• fix(deps): update dependency object-hash to v3 (object-hash, @types/object-hash)

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository

See issue illustrated here

Hi, I got an error when I render a simple app
Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object..

The error was provided by Table from ink-table.

App.tsx

I can't find any issues for this ! Hope you can help me..

tsconfig
{ "extends": "@sindresorhus/tsconfig", "compilerOptions": { "jsx": "react", "esModuleInterop": true, "outDir": "dist" }, "include": ["source"] }

package.json
{ "name": "simple-counter", "version": "0.0.0", "license": "MIT", "main": "dist/index.js", "type": "module", "engines": { "node": "14.17.0" }, "scripts": { "build": "tsc", "prestart": "yarn run build", "start": "yarn run serve", "serve": "node ." }, "files": [ "dist/index.js" ], "dependencies": { "dotenv": "^10.0.0", "ink": "^3.0.8", "ink-table": "^3.0.0", "react": "^16.14.0" }, "devDependencies": { "@sindresorhus/tsconfig": "^1.0.2", "@types/node": "^16.0.0", "@types/react": "^17.0.13", "chalk": "^4.1.1", "eslint-plugin-react": "^7.24.0", "eslint-plugin-react-hooks": "^4.2.0", "ink-testing-library": "^2.1.0", "typescript": "^4.3.5" }, "peerDependencies": { "eslint": "^7.30.0" } }

Just a placeholder issue for my PR to update to V3

With a sample use of Table I get the following error.

/Users/rschumacher/Projects/test-ink/node_modules/ink/lib/h.js:8
                throw new TypeError(`Expected component to be a function, but received ${typeof component}. You may have forgotten to export a component.`);
                ^

TypeError: Expected component to be a function, but received object. You may have forgotten to export a component.
    at h (/Users/rschumacher/Projects/test-ink/node_modules/ink/lib/h.js:8:9)
    at UI.render (/Users/rschumacher/Projects/test-ink/ui.js:66:12)
    at UI._render (/Users/rschumacher/Projects/test-ink/node_modules/ink/lib/component.js:54:15)
    at mount (/Users/rschumacher/Projects/test-ink/node_modules/ink/lib/diff.js:36:35)
    at diff (/Users/rschumacher/Projects/test-ink/node_modules/ink/lib/diff.js:136:3)
    at build (/Users/rschumacher/Projects/test-ink/node_modules/ink/lib/renderer.js:10:9)
    at Renderer.update (/Users/rschumacher/Projects/test-ink/node_modules/ink/lib/renderer.js:25:20)
    at exports.render (/Users/rschumacher/Projects/test-ink/node_modules/ink/index.js:59:14)
    at Object.<anonymous> (/Users/rschumacher/Projects/test-ink/cli.js:24:1)
    at Module._compile (module.js:635:30)

Current behaviour

Borders of the table are not visible in Light Background (default) theme of iTerm2, because they use the same white color as the background

Expected behaviour

Borders use a color with high contrast to the background, like in "Solarized Dark" theme:

I'm not sure if this is an issue of ink-table or ink, or even iTerm2, but I had to start somewhere with reporting it, so please direct me to the right repo, if it's not this one.

Could you publish the latest version to npm? I can see the last version in npm is from an year ago, but the update about supporting Ink 3.0 is implemented in Aug, 2020.

Thanks!

When using the header prop, unless the return value happens to have the exact width of the rendered column, the right side border character gets misaligned.

Is there a way to prevent this without knowing in advance how wide the column will be? Or am I doing something wrong?

To be clear, if I just pass through children with styling, there's no problem. The issue is if I want custom text headers, like:

const Header = () => (
  <Color green>
    New Title
  </Color>
);

And, on reflection, I'm guessing I should just modify the data table and reserve the header prop for styling? That's a reasonable limitation but was unclear to me in the documentation.

Current behaviour

If the cell value is 0, it is replaced with an empty string:

Expected behaviour

If the cell value is 0, it is printed:

Hi there , this component have great possibilities and it would help me lot to show IOT signals evolution. Great Job!
I just trying to figure out how to show a different color just for one cell when e.g. a temperature -among other values- is over certain limits.
I have made some practice with "custom.js" , but just gotten color changes all over the row , not a cell.
I have a bunch of other parameters to show in a matrix , in which the temperature have to get some color in order to act as an alerting signal.
I am searching something like :
if column is temperature and its value is over 22 then color = red ... other color = blue

Thanks in advance
Gabriel

Could you release the 2.0 version of ink-table? Thanks!

I'm working on a migration for Tink.

Related to this issue: https://npm.community/t/tink-new-search-ui/3087

Apparently this repo is no longer compatible with the new version of Ink since it is a class component.
I wrote the following (almost) equivalent react function version:

// Table.tsx
import React from 'react';
import {Box, Text} from 'ink';

type Scalar = string | number | boolean | null | undefined;

type ScalarDict = {
	[key: string]: Scalar;
};

type Column = {
	key: string;
	width: number;
};

type TableProps = {
	data: ScalarDict[];
	showHeaders?: boolean;
	headerStyles?: {
		color?: string;
		backgroundColor?: string;
		bold?: boolean;
		italic?: boolean;
		underline?: boolean;
		inverse?: boolean;
		strikethrough?: boolean;
		dimColor?: boolean;
	};
};

// Helper function to generate headers from data
function generateHeaders(data: ScalarDict[]): ScalarDict {
	let headers: ScalarDict = {};

	data.forEach(row => {
		Object.keys(row).forEach(key => {
			headers[key] = key;
		});
	});

	return headers;
}

const Table = ({data, showHeaders = true, headerStyles}: TableProps) => {
	// Determine columns and their widths
	const columns: Column[] = getColumns(data);

	return (
		<Box flexDirection="column">
			{renderHeaderSeparators(columns)}

			{showHeaders && (
				<>
					{renderRow(generateHeaders(data), columns, {
						color: 'blue',
						bold: true,
						...headerStyles,
					})}
					{renderRowSeparators(columns)}
				</>
			)}

			{data.map((row, index) => (
				<React.Fragment key={`row-${index}`}>
					{index !== 0 && renderRowSeparators(columns)}
					{renderRow(row, columns)}
				</React.Fragment>
			))}
			{renderFooterSeparators(columns)}
		</Box>
	);
};

// Helper function to determine columns and their widths
function getColumns(data: ScalarDict[]): Column[] {
	let columnWidths: {[key: string]: number} = {};

	data.forEach(row => {
		Object.keys(row).forEach(key => {
			const valueLength = row[key]?.toString().length || 0;
			columnWidths[key] = Math.max(
				columnWidths[key] || key.length,
				valueLength,
			);
		});
	});

	return Object.keys(columnWidths).map(key => ({
		key: key,
		width: (columnWidths[key] ?? 0) + 2, // adding padding
	}));
}

// Helper function to render a row with separators
function renderRow(row: ScalarDict, columns: Column[], textStyles?: any) {
	return (
		<Box flexDirection="row">
			<Text>│</Text>
			{columns.map((column, index) => (
				<React.Fragment key={column.key}>
					{index !== 0 && <Text>│</Text>}
					{/* Add separator before each cell except the first one */}
					<Box width={column.width} justifyContent="center">
						<Text {...textStyles}>{row[column.key]?.toString() || ''}</Text>
					</Box>
				</React.Fragment>
			))}
			<Text>│</Text>
		</Box>
	);
}

function renderHeaderSeparators(columns: Column[]) {
	return renderRowSeparators(columns, '┌', '┬', '┐');
}

function renderFooterSeparators(columns: Column[]) {
	return renderRowSeparators(columns, '└', '┴', '┘');
}

function renderRowSeparators(
	columns: Column[],
	leftChar = '├',
	midChar = '┼',
	rightChar = '┤',
) {
	return (
		<Box flexDirection="row">
			<Text>{leftChar}</Text>
			{columns.map((column, index) => (
				<React.Fragment key={column.key}>
					<Text>{'─'.repeat(column.width)}</Text>
					{index < columns.length - 1 ? (
						<Text>{midChar}</Text>
					) : (
						<Text>{rightChar}</Text>
					)}
				</React.Fragment>
			))}
		</Box>
	);
}

export default Table;

Usage:

<Table data={data} showHeaders={true} headerStyles={{color: "blue"}} />

Feel free to use it in your codes. 💫