反应表从按钮单击中隐藏各种列

Question

我有一个反应表，其中一个主要的标头，其中包含其下面的多个次级截图。当单击主标头时，我希望隐藏或显示带有名称“存款”的一个辅助标头或显示（切换）。请参阅屏幕截图。

我使用column.toggleheader（column.isvisible）的解决方案。我俩都想证明这一点，因为那里没有很多材料来做到这一点。我想知道是否使用.getToggleHiddenProps有整洁的解决方案。老实说，我不明白intererminatecheckbox例如。 https://github.com/tanstack/tanstack/table/table/discussions/1989 将与特定的列标题值一起使用。

我的答案下面。

Answer 1

只是一些背景 - 这是一个Web3应用程序，它正在获取有关加密钱包的信息 - 因此，为什么代码寻找'0x'并将列标题值降低到const headerShortended = header.substr.substr（0,5） +'。 。

​完成了此初始版本，所以不要对我进行任何粗糙的边缘。虽然很高兴收到建设性的反馈。

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>
    );
}