React-table 隐藏按钮单击的各个列

Question

I have a react-table with a primary header containing multiple secondary headers underneath it. When the primary header is clicked I want all but one secondary header with name 'deposit' to be hidden, or shown (toggle). See screenshot.

I have a solution using column.toggleHeader(column.isVisible) . I both wanted to demonstrate this as there wasn't a lot of material out there for how to do this; and I'm wondering if there are neater solutions using .getToggleHiddenProps . To be honest I don't understand what is going on with IndeterminateCheckbox eg. https://github.com/TanStack/table/discussions/1989 and how that would be used with specific column header values.

My answer below.

Answer 1

Just some background - this is a Web3 app that is getting information about Crypto wallets - hence why the code looks for '0x' and reduces the column header value to const headerShortened = header.substr(0,5) + '...' + header.substr(header.length - 4,header.length) (So 0x123abcFED1239876 becomes ox123...9876 )

I've just finished this initial version so don't AT me for any rough edges. Though happy to receive constructive feedback.

interface DataTableProps {
    data: any
    columns: Column<DripRowFormat>[]
}

interface AHeaderProps {
    column: ColumnInstance<DripRowFormat>
    allColumns: Array<ColumnInstance<DripRowFormat>>
}

export function DataTable({data, columns}: DataTableProps) {

    const [hiddenColumns, setHiddenColumns] = useState<string[]>([])

    const initialState = {hiddenColumns}
    const {
        getTableProps,
        getTableBodyProps,
        headerGroups,
        rows,
        prepareRow,
        allColumns,
        getToggleHideAllColumnsProps,
        state
    } = useTable({columns, data, initialState});

    // console.log(`table input: ${JSON.stringify(data, null, 2)}`)
    // console.log(`table rows: ${Util.inspect(rows)}`)
    // console.log(`getTableProps: ${JSON.stringify(getTableProps())}`)
    // console.log(`allColumns: ${Util.inspect(allColumns)}`)

    const RenderHeader = ({column, allColumns}: AHeaderProps) => {
        const colHeaderClick = (e: React.MouseEvent<HTMLButtonElement>) => {
            e.preventDefault()
            // Now call column.toggleHidden() for all cols but 'deposit' - so when Hidden only Deposit is shown
            const childColumnsNotDeposit = allColumns.filter(c =>
                column.Header && c.Header && c.parent
                && c.Header.toString().toLowerCase() !== 'deposit'
                && c?.parent?.Header?.toString() === column.Header)
            childColumnsNotDeposit.forEach(c => {
                c.toggleHidden(c.isVisible)
            })
        }
    
        const drawHeaderWRTVisibleColumns = (column: ColumnInstance<DripRowFormat>): ReactNode => {
            if (! column) {
                return (
                    <span>NOT COL</span>
                )
            }
            const childCols = column.columns?.filter(c => c.isVisible)
            // @ts-ignore
            if (childCols && childCols.length < column?.columns?.length) {
                // @ts-ignore
                const header = column.Header.toString()
                const headerShortened = header.substr(0,5) +
                    '...' + header.substr(header.length - 4,header.length)
                return (
                    <span>{headerShortened}</span>
                )
            } else {
                return column.render('Header')
            }
        }
    
        // @ts-ignore
        if (column.placeholderOf?.Header.startsWith('0x')) {
            return (
                <button onClick={colHeaderClick}>{drawHeaderWRTVisibleColumns(column)}</button>
            )
        } else if (column.Header?.toString().startsWith('0x')) {
            return (
                <button onClick={colHeaderClick}>{drawHeaderWRTVisibleColumns(column)}</button>
            )
        } else {
            return (
                <span>{column.render('Header')}</span>
            )
        }
    }

    return (
        <div>
            <table {...getTableProps()}>
                <thead>
                    {headerGroups.map(headerGroup => (
                        <tr {...headerGroup.getHeaderGroupProps()}>
                            {headerGroup.headers.map(column => (
                                // @ts-ignore
                                <th {...column.getHeaderProps()}><RenderHeader column={column} allColumns={allColumns}/></th>
                            ))}
                        </tr>
                    ))}
                </thead>
                <tbody {...getTableBodyProps()}>
                    {rows.map((row, i) => {
                        prepareRow(row)
                        return (
                            <tr {...row.getRowProps()}>
                                {row.cells.map(cell => {
                                    return <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                                })}
                            </tr>
                        )
                    })}
                </tbody>
            </table>
        </div>
    );
}