const columns = [
    {
      title: "Users",
      dataIndex: "fullName",
      key: "fullName",
      width: "40%",
      ...getColumnSearchProps("fullName"),
      // sorter: (a, b) => a.fullName.length - b.fullName.length,
      sorter: (a, b) => a.fullName.localeCompare(b.fullName),
    },
    {
      title: "Status",
      dataIndex: "disabled",
      key: "disabled",
      width: "20%",
      ...getColumnSearchProps("disabled"),
      sorter: (a, b) => (a.disabled === b.disabled ? 0 : a.disabled ? -1 : 1), //return 0 if they’re equal, -1 if the first value is true, and 1 if the second value is true.
      render: (_, { disabled }) => renderUserStatus(disabled),
    },
    {
      title: "User Type",
      dataIndex: "role",
      width: "20%",
      key: "role",
      ...getColumnSearchProps("role"),
      //   sorter: (a, b) => a.role < b.role,
      sorter: (a, b) =>
        userRolesById[a.role] > userRolesById[b.role] ? 1 : -1,
      render: (_, { role }) => renderUserType(role),
    },
    {
      title: "User Name",
      dataIndex: "userName",
      width: "20%",
      key: "userName",
      ...getColumnSearchProps("userName"),
      sorter: (a, b) => a.userName.toLowerCase() < b.userName.toLowerCase(),
    },
  ]; all this columns use the below function to search columns const getColumnSearchProps = (dataIndex) => ({
    filterDropdown: ({
      setSelectedKeys,
      selectedKeys,
      confirm,
      clearFilters,
    }) => (
      <div
        style={{
          padding: 8,
        }}
      >
        <Input
          ref={searchInput}
          placeholder={`Search ${dataIndex}`}
          value={selectedKeys[0]}
          onChange={(e) =>
            setSelectedKeys(e.target.value ? [e.target.value] : [])
          }
          onPressEnter={() => handleSearch(selectedKeys, confirm, dataIndex)}
          style={{
            marginBottom: 8,
            display: "block",
          }}
        />
        <Space>
          <Button
            type="primary"
            onClick={() => handleSearch(selectedKeys, confirm, dataIndex)}
            icon={<SearchOutlined />}
            size="small"
            style={{
              width: 90,
            }}
          >
            Search
          </Button>
          <Button
            onClick={() => clearFilters && handleReset(clearFilters)}
            size="small"
            style={{
              width: 90,
            }}
          >
            Reset
          </Button>
          <Button
            type="link"
            size="small"
            onClick={() => {
              confirm({
                closeDropdown: false,
              });
              setSearchText(selectedKeys[0]);
              setSearchedColumn(dataIndex);
            }}
          >
            Filter
          </Button>
        </Space>
      </div>
    ),
    filterIcon: (filtered) => (
      <SearchOutlined
        style={{
          color: filtered ? "#1890ff" : undefined,
        }}
      />
    ),
    onFilter: (value, record) => {
      dataIndex
        ? renderUserType(record[dataIndex])
            .toLowerCase()
            .includes(value.toLowerCase())
        : record[dataIndex]
            .toString()
            .toLowerCase()
            .includes(value.toLowerCase());
    },
    onFilterDropdownVisibleChange: (visible) => {
      if (visible) {
        setTimeout(() => searchInput.current?.select(), 100);
      }
    },
    render: (text) =>
      searchedColumn === dataIndex ? (
        <Highlighter
          highlightStyle={{
            backgroundColor: "#ffc069",
            padding: 0,
          }}
          searchWords={[searchText]}
          autoEscape
          textToHighlight={text ? text.toString() : ""}
        />
      ) : (
        text
      ),
  }); update onFilter so that is will conditionally use one of the methods when dataIndex is role