Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

console.table does not render one dimensional array correctly #123

Open
akashdotsrivastava opened this issue May 10, 2023 · 1 comment
Open

Comments

@akashdotsrivastava
Copy link

akashdotsrivastava commented May 10, 2023

console.table([1, 2, 3])

This is the result of console.table in Chrome:
Screenshot 2023-05-10 at 6 02 39 PM

This is the result when rendering the same using console-feed
Screenshot 2023-05-10 at 6 00 12 PM

The value column doesn't show up.

This can be seen in this demo as well: https://codesandbox.io/s/console-feed-ziq76t?file=/src/demo/index.js:302-330

@akashdotsrivastava akashdotsrivastava changed the title console.table does not render single dimension array correctly console.table does not render one dimensional array correctly May 10, 2023
@alifeinbinary
Copy link

Format your table items and use useEffect to initialise things in the right order like this.

// Loading the console
useEffect(() => {
    function handleCallback(logItems: Message[]) {
        setLogs(logItems);
    }
    function transpose(matrix: Message[][]) {
        if (!matrix || matrix.length === 0) return [];
        const table = matrix[0]
        return table
    }
    const hookedConsole = Hook(
        window.console,
        (logItems) => handleCallback([{ ...logItems, data: [transpose(logItems.data as Message[][])] }] as Message[]),
        false
    )

    return () => {
        if (hookedConsole) {
            Unhook(hookedConsole)
        }
    }
}, [setLogs])

// Keeping it fresh in the console
useEffect(() => {
    // Debug console
    const items = {
        input: [input],
        outputLength: [output.length],
    }
}, [nput, output])

return <Console logs={logs.logs} filter={['table']} />

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants