Grid Column with EmployeeSearch

import React from 'react';
import Grid from 'app/core/components/Grid';

function GridExample() {
  const data = [
    { role: null, city: 'Bangalore' },
    { role: null, city: 'Hyderabad' },
    { role: null, city: 'Chennai' },
    { role: null, city: 'Mumbai' },
  ];

  const handleRoleChange = React.useCallback(
    async (changes: any[], updatedRowData: any) => {
      const roleChange = changes.find(change => change.prop === 'role');
      if (!roleChange) {
        return updatedRowData;
      }

      // Handle clearing the selection - just return the updated data
      const newValue = roleChange.newValue;
      const additionalValue = roleChange.additionalValue;
      if (!newValue) {
        return {
          role: {},
          city: null,
        };
      }

      // Return the updated row data with the fetched role information and city
      return {
        ...updatedRowData,
        role: {
          fullName: additionalValue.label ?? '',
          title: additionalValue.secondaryLabel ?? '',
          id: additionalValue.value ?? '',
        },
        city: 'Banglore',
      };
    },
    []
  );

  return (
    <>
      <Grid
        columns={[
          {
            header: 'Employee',
            data: 'role',
            type: Grid.CELL_TYPES.ROLE,
            editable: true,
            nullPlaceholder: 'Select Employee',
            props: {
              canClear: true,
              filters: {
                roleFilter: {
                  roleState__in: ['TERMINATED', 'ACTIVE', 'ACCEPTED', 'HIRED'],
                },
              },
              shouldUseDefaultFilter: false,
            },
          },
          {
            header: 'City',
            data: 'city',
            type: Grid.CELL_TYPES.TEXT,
          },
        ]}
        data={data}
        onRowChange={handleRoleChange}
        height={300}
      />
    </>
  );
}

export { GridExample as PageLoad };