Filter is not working

[k-m-12345]

Hey there,
I am trying to apply filter & sorting on table but looks like they are not working for me somehow. I am displaying tooltip when mouse is entered on cells and when that cell is clicked i perform some action as well. i used Cell props to customize it since i dont want hover effect to work on all columns in my table. However when i click on column headers- sorting works but the icon is not displayed. Here is how i'm trying to do-

const provideTooltip = (row: any, children: any) => {
    return (
      <Tooltip
        content={<>
          <h3 style={{ textAlign: "left" }}>{row.original.smartDeviceId}</h3>
          <table cellSpacing="5">
            <tr>
              <th style={{ width: 100, padding: 0 }}>Device Type</th>
              <td align="left">{row.original.smartDeviceType}</td>

              //other <th><td>s.....

            </tr>
          </table>
        </>}
        placement='bottom'
        {children}
      </Tooltip>
    )
  }

  const onClick = (event: React.MouseEvent, row: any) => {
    IModelApp.viewManager.selectedView!.zoom(row.original.worldLocation, 1, { animateFrustumChange: true });
  }

  const translatedLabels = React.useMemo(
    () => ({
      filter: 'Filter',
      clear: 'Clear',
      from: 'From',
      to: 'To',
    }),
    [],
  );

  const tableColumns = React.useMemo(
    () =>
      [
        {
          Header: 'Table',
          columns: [
           {
              Header: 'Name',
              accessor: 'smartDeviceId',
              id: 'name',
              fieldType: 'text',
              Filter: tableFilters.TextFilter(translatedLabels),
              Cell: (props: any) => {
                return provideTooltip(
                  props.row,
                  <div onClick={(event: React.MouseEvent) => onClick(event, props.row)} key={props.row.original.smartDeviceId}>
                    {props.row.original.smartDeviceId}
                  </div>
                )
              }
            },

            //...other headers
            
             {
              Header: 'Type',
              accessor: 'smartDeviceType',
              id: 'type',
              maxWidth: 200,
               Filter: tableFilters.TextFilter(translatedLabels),
              Cell: (props: any) => {
                return provideTooltip(
                  props.row,
                  <div onClick={(event: React.MouseEvent) => onClick(event, props.row)} key={props.row.original.smartDeviceType}>
                    {props.row.original.smartDeviceType}
                  </div>
                )
              },
            },
          ],
    [translatedLabels]
  )

return (
    <Table
      columns={tableColumns}
      data={smartTableList}
      emptyFilteredTableContent="No results found. Clear or try another filter."
      emptyTableContent="No Data"
      isSortable={true}
    />
  )

[bentleyvk]

Hi,
I don't fully understand your problem. Can you try to do minimal repro using this sandbox https://codesandbox.io/s/itwinui-react-example-son74 ?