Global filter text input displayed twice when using custom top toolbar

[oben01]

Hello,
am using the renderTopToolbarCustomActions to display a button and the MRT_GlobalFilterTextInput, i disabled the ToolbarInternalActions by setting enableToolbarInternalActions to false. I got two seach button displayed :

here is my MRT_tableInstance :

const table = useMantineReactTable({
    columns: columns,
    data,
    enableEditing: true,
    enableColumnOrdering: true,
    positionActionsColumn: 'last',
    enableTopToolbar: true,
    enableToolbarInternalActions: false,
    initialState: {
      showGlobalFilter: true, //show the global filter by default
    },
    icons: faIcons,
    renderRowActions: ({ table, row }) => (
      <Group spacing={3} position="center">
        <ActionIcon onClick={() => handleTogglePowerRow(row)}>
          <IconPower size={30} stroke={1.5} />
        </ActionIcon>
        <ActionIcon onClick={() => table.setEditingRow(row)}>
          <IconPencil size={30} stroke={1.5} />
        </ActionIcon>
        <ActionIcon color="red" onClick={() => handleDeleteRow(row)}>
          <IconTrash size={30} stroke={1.5} />
        </ActionIcon>
      </Group>
    ),
    renderTopToolbarCustomActions: ({ table }) => (
      <Flex
        sx={(theme) => ({
          backgroundColor: theme.fn.rgba(theme.colors.blue[3], 0.2),
          borderRadius: '4px',
          flexDirection: 'row',
          gap: '16px',
          justifyContent: 'space-between',
          padding: '24px 16px',
          '@media max-width: 768px': {
            flexDirection: 'column',
          },
        })}
      >
        <MRT_GlobalFilterTextInput table={table} />
        <Box>
          <Button
            leftIcon={<IconHomePlus />}
            onClick={() => setCreatePluginModelOpened(true)}
          >
            {t('plugins.home.create-new-plugin-btn')}
          </Button>
        </Box>
      </Flex>
    ),
  });

Any thoughts ? thank u :)

[oben01]

Any update on this one ? i Just want to add that was working on version 1.3.0

[KevinVandy]

I really don't see a problem here. Don't render 2 global filters. Use renderTopToolbar instead of the custom actions render. What would you even suggest to be changed in the default behavior here?

[oben01]

In the version ^1.0.0-beta.15* when i used renderTopToolbarCustomActions the search from renderTopToolbar was not render
here is my MantineReactTable :

<MantineReactTable
          displayColumnDefOptions={{
            'mrt-row-actions': {
              mantineTableHeadCellProps: {
                align: 'center',
              },
              size: 120,
            },
            'mrt-row-expand': {
              mantineTableHeadCellProps: {
                align: 'right',
              },
              mantineTableBodyCellProps: {
                align: 'right',
              },
            },
          }}
          columns={columns}
          data={tableData}
          editingMode="modal" //default
          enableEditing
          enableColumnOrdering
          positionActionsColumn="last"
          enableTopToolbar={false}
          initialState={{ showGlobalFilter: true }}
          tableInstanceRef={tableInstanceRef}
          icons={{
            IconSearch: () => <IconHomeSearch />,
          }}
          renderRowActions={({ row, table }) => (
            <Group spacing={3} position="center">
              <ActionIcon onClick={() => handleTogglePowerRow(row)}>
                <IconPower size={30} stroke={1.5} />
              </ActionIcon>
              <ActionIcon onClick={() => table.setEditingRow(row)}>
                <IconPencil size={30} stroke={1.5} />
              </ActionIcon>
              <ActionIcon color="red" onClick={() => handleDeleteRow(row)}>
                <IconTrash size={30} stroke={1.5} />
              </ActionIcon>
            </Group>
          )}
        />

I was expecting the same behaviour on the latest version

[oashrafov]

@oben01 , were you able to find a solution?

[oben01]

@webofpies I don't remember what i did to make it work but here is the page : https://github.com/Yadoms/yadoms-client/blob/feature/pluginsForms/libs/pages/plugins/src/lib/ui/plugins-page/plugins.tsx

[oashrafov]

great, thanks