'multi-select' filter throws error when accessorKey is number

[arindammitra06]

mantine-react-table version

v1.3.4

react & react-dom versions

18.2.0

Describe the bug and the steps to reproduce it

I am declaring columns as below, where ACTIVE is a number field and is usually 0/1. What I noticed that the multiselect filter works fine when the column type is string, but in this scenario it throws an error and page becomes white when clicking on the filter icon in the header.

{
            accessorKey: "ACTIVE", 
            header: "Active?",
            size: 50,
            filterVariant: 'multi-select',
            Cell: (cell:any ) => {
                return (
                    <Text fw={500}>{cell.renderedCellValue}</Text>
                  );
            }
},

The exception is as below.

MultiSelect.tsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'toLowerCase')
at defaultFilter (MultiSelect.tsx:59:1)
at filterData (filter-data.ts:24:1)
at MultiSelect.tsx:293:1
at renderWithHooks (react-dom.development.js:16305:1)
at updateForwardRef (react-dom.development.js:19226:1)
at beginWork (react-dom.development.js:21636:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1)
at invokeGuardedCallback (react-dom.development.js:4277:1)
at beginWork$1 (react-dom.development.js:27451:1)

Requesting help if I am doing anything wrong. Thank You for the wonderful package.

Minimal, Reproducible Example - (Optional, but Recommended)

const columns = useMemo(
        () => [
          
          {
            accessorKey: "TYPE", 
            header: "Type",
            size: 50,
            filterVariant: 'multi-select',
            
            Cell: (cell:any ) => {
                return (
                    cell.renderedCellValue==='ALERT' ? 
                    <Center><FaCircleStop color="#F44336" size="1.2rem" /> </Center>
                    : <Center><FaCircleStop color="#FFC107" size="1.2rem" /></Center>
                    
                  ); 
            }
          },
          {
            accessorKey: "ACTIVE", 
            header: "Active?",
            size: 50,
            filterVariant: 'multi-select',
            Cell: (cell:any ) => {
                return (
                    <Text fw={500}>{cell.renderedCellValue}</Text>
                  );
            }
          },
          {
            accessorKey: "CREATEDFRMT", 
            header: "Created",
            size: 50,
            filterVariant: 'multi-select',
            Cell: (cell:any ) => {
                return (
                    <Text fw={500}>{cell.renderedCellValue}</Text>
                  );
            }
          },
          {
            accessorKey: "SOURCE", 
            header: "Source",
            size: 50,
            filterVariant: 'multi-select',
            Cell: (cell:any ) => {
                return (
                    cell.renderedCellValue==='MANUAL_MONITOR' ?  
                   <Text fw={500}>Manual Monitoring</Text>:
                   <Text fw={500}>Automated Monitoring</Text>
                );
            }
          },
          {
            accessorKey: "MESSAGE", 
            header: "Message",
            size: 50,
          },
        ],
        []
      );

Screenshots or Videos (Optional)

Do you intend to try to help solve this bug with your own PR?

No, because I do not know how

Terms

• I understand that if my bug cannot be reliably reproduced in a debuggable environment, it will probably not be fixed and this issue may even be closed.

[alessandrojcm]

MultiSelect works with strings, not numbers. You should cast your values to strings where appropriate, the package cannot do it for you since we do not know the shape of your data.

[arindammitra06]

Thank You for your reply. I will work as you suggested. I just wanted to let you know, I simply love this library and I am thankful to you guys for such a beautiful library. I will be using it wherever applicable. Thank You once again.