samdenty/console-feed

console.table does not render one dimensional array correctly

akashdotsrivastava opened this issue · 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

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