console-feed icon indicating copy to clipboard operation
console-feed copied to clipboard

console.table does not render one dimensional array correctly

Open akashdotsrivastava opened this issue 2 years ago • 1 comments

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 avatar May 10 '23 12:05 akashdotsrivastava

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']} />

alifeinbinary avatar Sep 14 '24 01:09 alifeinbinary