<Tooltip openDelay={100} position="bottom">
    <Grid
        data={process(teams.map((item) => ({ ...item, selected: item.uniqueIdentifier === gridSelection.uid })), gridState)}
          {...gridState}
          onDataStateChange={handleGridDataStateChange}
          onRowClick={handleRowClick}
          onRowDoubleClick={handleDoubleClick}
          sortable={true}
          pageable={true}
          selectedField="selected">
   <Column
      title={teamname}
      field="name" filter={'text'}
      cell={GridCellTooltip}
      columnMenu={ColumnMenu}
      headerCell={CustomHeaderCell}
   />

return (
    <td title={props.dataItem[field]}>
      {props.dataItem[field]}
    </td>
  );

import * as React from "react";
import * as ReactDOM from "react-dom";
import { DropDownList, DropDownListChangeEvent, DropDownListFilterChangeEvent } from "@progress/kendo-react-dropdowns";
import { dataCategories, dataProducts, dataOrders } from "./data";
import { filterBy } from '@progress/kendo-data-query';

const defaultItemCategory = { categoryName: "Select Category ..." };
const defaultItemProduct = { productName: "Select Product ..." };
const defaultItemOrder = { orderName: "Select Order ..." };

const App = () => {
  const [state, setState] = React.useState({
    category: null,
    product: null,
    order: null,
    orders: dataOrders,
    products: dataProducts
  });

  const categoryChange = (event: DropDownListChangeEvent) => {
    const category = event.target.value;
    const products = dataProducts.filter(
      product => product.categoryId === category.categoryId
    );

    setState({
      ...state,
      category: category,
      products: products,
      product: null,
      order: null
    });
  };

  const productChange = (event: DropDownListChangeEvent) => {
    const product = event.target.value;
    const orders = dataOrders.filter(
      order => order.productId === product.productId
    );

    setState({
      ...state,
      product: product,
      orders: orders,
      order: null
    });
  };

  const orderChange = (event: DropDownListChangeEvent) => {
    setState({ ...state, order: event.target.value });
  };

  const ddlProducts_onFilterChange = (event: DropDownListFilterChangeEvent) => {
    setState({ products: state.products });
  }



  const category = state.category;
  const product = state.product;
  const order = state.order;

  const hasCategory = category && category !== defaultItemCategory;
  const hasProduct = product && product !== defaultItemProduct;

  return (
    <div style={{ display: 'flex', gap: '30px', flexWrap: 'wrap' }}>
      <div>
        Categories
        <br />
        <DropDownList
          style={{ width: '300px' }}
          data={dataCategories}
          textField="categoryName"
          onChange={categoryChange}
          defaultItem={defaultItemCategory}
          value={category}
        />
      </div>
      <div>
        Products
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasCategory}
          data={state.products}
          textField="productName"
          onChange={productChange}
          defaultItem={defaultItemProduct}
          value={product}
          filterable={ true }
          onFilterChange={ ddlProducts_onFilterChange }
        />
      </div>
      <div>
        Orders
        <br />
        <DropDownList
          style={{ width: '300px' }}
          disabled={!hasProduct}
          data={state.orders}
          textField="orderName"
          onChange={orderChange}
          defaultItem={defaultItemOrder}
          value={order}
        />
      </div>
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("my-app"));