Is it possible to reuse the original filter input component provided by MRT when creating custom filters?

[eastack]

I'm a React beginner, so please forgive me if I ask any silly questions. I'm currently developing a simple CMS system, and for the table component, I'm using MRT (Material React Table) because I find it powerful, well-designed, and highly customizable. At the moment, I'm trying to create a custom column filter component. I want to display a tree component showing the document category tree for filtering when the input box is clicked. However, I'm unsure how to make my Input component's appearance consistent with MRT's. Right now, the interface looks a bit out of place.

[eastack]

I think I've managed to do it, but there's still a lot of work to be done to make it truly polished.

FilterTreeInput.tsx

import clsx from 'clsx';
import { Checkbox, getTreeExpandedState, Group, MultiSelect, Popover, RenderTreeNodePayload, Tree, TreeNodeData, useTree } from '@mantine/core'
import classes from './FilterTreeInput.module.css'
import { IconChevronDown } from '@tabler/icons-react';


const data: TreeNodeData[] = [
    {
        label: 'src',
        value: 'src',
        children: [
            {
                label: 'src/components',
                value: 'src/components',
                children: [
                    { label: 'Accordion.tsx', value: 'src/components/Accordion.tsx' },
                    { label: 'Tree.tsx', value: 'src/components/Tree.tsx' },
                    { label: 'Button.tsx', value: 'src/components/Button.tsx' },
                ],
            },
        ],
    },
    {
        label: 'node_modules',
        value: 'node_modules',
        children: [
            {
                label: 'react',
                value: 'node_modules/react',
                children: [
                    { label: 'index.d.ts', value: 'node_modules/react/index.d.ts' },
                    { label: 'package.json', value: 'node_modules/react/package.json' },
                ],
            },
        ],
    }
];

export const FilterTreeInput = () => {
    const tree = useTree({
        initialExpandedState: getTreeExpandedState(data, '*'),
        initialCheckedState: [
            'node_modules',
            'node_modules/@mantine/core/index.d.ts',
            'node_modules/@mantine/form/package.json',
        ]
    })

    const renderTreeNode = ({
        node,
        expanded,
        hasChildren,
        elementProps,
        tree,
    }: RenderTreeNodePayload) => {
        const checked = tree.isNodeChecked(node.value)
        const indeterminate = tree.isNodeIndeterminate(node.value)

        return (
            <Group gap="xs" {...elementProps}>
                <Checkbox.Indicator
                    checked={checked}
                    indeterminate={indeterminate}
                    onClick={() => {
                        console.log(checked, node.value)
                        if (checked) {
                            tree.uncheckNode(node.value)
                        } else {
                            tree.checkNode(node.value)
                        }
                    }}
                />
                <Group gap={5} onClick={() => tree.toggleExpanded(node.value)}>
                    <span>{node.label}</span>
                    {hasChildren && (
                        <IconChevronDown
                            size={14}
                            style={{ transform: expanded ? 'rotate(180deg)' : 'rotate(0deg)' }}
                        />
                    )}
                </Group>
            </Group>
        )
    }
    return (
        <Popover width={230} position="bottom" offset={{ mainAxis: 15, crossAxis: 15 }}>
            <Popover.Target>
                <MultiSelect
                    placeholder='以 文档分类 过滤'
                    variant='unstyled'
                    className={clsx('mrt-filter-text-input', classes.root)}
                />
            </Popover.Target>
            <Popover.Dropdown>
                <Tree
                    data={data}
                    tree={tree}
                    levelOffset={23}
                    expandOnClick={false}
                    renderNode={renderTreeNode}
                />
            </Popover.Dropdown>
        </Popover>
    )
}

FilterTreeInput.module.css (extract from node_modules/mantine-react-table/src/components/inputs/MRT_FilterTextInput.module.css)

.root {
    font-weight: normal;
    border-bottom: 2px solid light-dark(var(--mantine-color-gray-3), var(--mantine-color-gray-7));
    min-width: auto;
    width: 100%;
}

[alessandrojcm]

Hi @eastack , all of the components used in MRT are exported for use, you can import the MRT_FilterTextInput component and reused that within MRT, however I am not sure how will that be useful when creating your tree filter?

[eastack]

MRT currently supports the following filter variants: text, autocomplete, select, multi-select, range, range-slider, date, date-range, and checkbox. However, my CMS includes a category tree. Initially, I treated each level of the tree as a cascading column filter to filter content. At some point, I began to think that perhaps I shouldn't make each level a separate column for cascading filtering/display. Instead, I might need to display a tree structure that allows selecting types for filtering.

At first, I thought this should be straightforward—I could simply use MRT_FilterTextInput. But I eventually discovered that after customizing the Filter property of MRT_ColumnDef with MRT_FilterTextInput, the rendering seemed to fall into recursion. I'm not entirely sure of the exact reason and didn't dive deep into debugging. After briefly reviewing the source code of MRT_FilterTextInput, I figured I might need to implement one myself.

[alessandrojcm]

Ah I see, yeah you're better off creating your own filter. There's info about that in the docs I believe