Filter boolean field with antd table

How do I filter boolean value with filterDropdown in antd list view? What am i doing wrong here?

<Table.Column<Template>
            dataIndex="base"
            title="Base"
            defaultFilteredValue={getDefaultFilter('base', filters)}
            filterIcon={<FilterFilled />}
            filterMultiple={false}
            filterDropdown={(props) => (
              <FilterDropdown
                {...props}
                mapValue={(selectedKeys) => {
                  console.log(selectedKeys);
                  return selectedKeys;
                }}
              >
                <Select
                  style={{ width: 200 }}
                  options={[
                    { label: 'Yes', value: true },
                    { label: 'No', value: false },
                  ]}
                />
              </FilterDropdown>
            )}
            onFilter={(value, record) => {
              console.log(value, record);
              const base = record.base ? true : false;
              return base === value;
            }}
            render={(value, record) => (
              <BooleanField
                value={record.base}
                trueIcon={<CheckCircleTwoTone twoToneColor="#007965" />}
                falseIcon={<CloseCircleTwoTone twoToneColor="#ad001d" />}
                valueLabelTrue="Yes"
                valueLabelFalse="No"
              />
            )}
          />

<Table.Column<Template>
            dataIndex="base"
            title="Base"
            defaultFilteredValue={getDefaultFilter('base', filters)}
            filterIcon={<FilterFilled />}
            filterMultiple={false}
            filterDropdown={(props) => (
              <FilterDropdown
                {...props}
                mapValue={(selectedKeys) => {
                  console.log(selectedKeys);
                  return selectedKeys;
                }}
              >
                <Select
                  style={{ width: 200 }}
                  options={[
                    { label: 'Yes', value: true },
                    { label: 'No', value: false },
                  ]}
                />
              </FilterDropdown>
            )}
            onFilter={(value, record) => {
              console.log(value, record);
              const base = record.base ? true : false;
              return base === value;
            }}
            render={(value, record) => (
              <BooleanField
                value={record.base}
                trueIcon={<CheckCircleTwoTone twoToneColor="#007965" />}
                falseIcon={<CloseCircleTwoTone twoToneColor="#ad001d" />}
                valueLabelTrue="Yes"
                valueLabelFalse="No"
              />
            )}
          />

5 Replies

kapa.ai•5mo ago

Hi @chachi. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- To filter a boolean field using the filterDropdown in an Ant Design table, you can use the <FilterDropdown /> component from the @refinedev/antd package. This component is designed to integrate seamlessly with Ant Design's table filtering system. From the code snippet you provided, it seems like you are on the right track. However, ensure that the mapValue function is correctly transforming the selectedKeys to match the data type of your boolean field. The onFilter function should also correctly compare the boolean values. Here's a breakdown of your code with some additional context: 1. FilterDropdown Component: You are using the <FilterDropdown /> component, which is correct. This component helps in managing the filter state and UI. 2. Select Options: You have defined options for the Select component with boolean values, which is appropriate for filtering boolean fields. 3. onFilter Function: This function is used to determine if a row should be displayed based on the filter value. Ensure that the comparison logic (base === value) correctly matches the boolean logic you intend. 4. BooleanField Rendering: You are using the <BooleanField /> component to render the boolean values with custom icons and labels, which is a good practice for better UI representation. If you are still facing issues, ensure that the selectedKeys in the mapValue function are being correctly transformed to match the boolean values in your data. You might also want to check if the defaultFilteredValue is being set correctly. For more detailed information, you can refer to the FilterDropdown documentation (https://refine.dev/docs/ui-integrations/ant-design/components/filter-dropdown/#properties) and the BooleanField documentation (https://refine.dev/docs/ui-integrations/ant-design/components/fields/boolean-field/#api-reference). If you need further assistance, you might want to check the example provided in the Table Filters in Ant Design documentation (https://refine.dev/docs/examples/table/antd/tableFilter/). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@95552725294518272> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

continuing-cyanOP•5mo ago

@kapa.ai NestJS-Query expects BooleanFieldComparison which is either "is" or "isNot". However refine does not provide these operators. How should I resolve this?

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Hmm, I don't know enough to give you a confident answer yet. However, you might want to explore the possibility of customizing the filter operators in Refine to match the expected BooleanFieldComparison in NestJS-Query. You can refer to the Refine documentation on using custom operators (https://refine.dev/docs/ui-integrations/ant-design/hooks/use-table/) and see if you can extend or modify the existing operators to include is or isNot. Additionally, reviewing the NestJS-Query documentation (https://github.com/refinedev/refine/issues/6008) might provide insights into how these operators are expected to be used. If you have further questions or need more detailed guidance, consider reaching out to the Refine community or checking the GitHub issues (https://github.com/refinedev/refine/issues) for similar cases. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5mo ago

<@95552725294518272> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Filter boolean field with antd table

Did you find this page helpful?