Documentation: Implementing Custom Cell Renderers in React Data Grid¶

const columns = [
  {
    key: 'columnKey',
    name: 'Column Name',
    renderCell: (props) => {
      // Custom rendering logic
      return <CustomCellRenderer {...props} />;
    },
  },
  // ... other columns
];

**Explanation:**

- The `ExtractCellFormatter` component accepts `value`, `cellStatus`, and action handlers as props.
- It displays a loading spinner if `cellStatus.isLoading` is `true`.
- Otherwise, it displays the cell's value and appropriate status icons based on `cellStatus`.

---

## Step 3: Mapping Cell Statuses

We need a way to determine the status of each cell to control what's displayed. We'll create a `cellStatusMap` that maps each cell to its status.

### **Implementation**

In your main `DataGrid` component file:

```typescript:src/components/extracts/datagrid/DataGrid.tsx
import React, { useMemo } from "react";
// ... other imports ...

import { ExtractCellFormatter, CellStatus } from "./ExtractCellFormatter";

// ... other code ...

/**
 * ExtractDataGrid component displays the data grid with custom cell renderers.
 */
export const ExtractDataGrid: React.FC<DataGridProps> = ({
  extract,
  cells,
  rows,
  columns,
  // ... other props ...
}) => {
  // ... existing state and effects ...

  /**
   * Creates a map of cell statuses for quick access during rendering.
   */
  const cellStatusMap = useMemo(() => {
    const map = new Map<string, CellStatus>();

    cells.forEach((cell) => {
      const extractIsProcessing =
        extract.started && !extract.finished && !extract.error;
      const cellIsProcessing =
        cell.started && !cell.completed && !cell.failed;
      const isProcessing =
        cellIsProcessing || (extractIsProcessing && !cell.started);

      const status: CellStatus = {
        isLoading: Boolean(isProcessing),
        isApproved: Boolean(cell.approvedBy),
        isRejected: Boolean(cell.rejectedBy),
        isEdited: Boolean(cell.correctedData),
        originalData: cell.data || null,
        correctedData: cell.correctedData || null,
        error: cell.failed || null,
      };

      const cellKey = `${cell.document.id}-${cell.column.id}`;
      map.set(cellKey, status);
    });

    return map;
  }, [cells, extract]);

  // ... other code ...
};

      const value = props.row[col.id] || "";

      return (
        <ExtractCellFormatter
          value={String(value)}
          cellStatus={cellStatus}
          onApprove={() => {
            // Implement approval logic
          }}
          onReject={() => {
            // Implement rejection logic
          }}
          onEdit={() => {
            // Implement edit logic
          }}
        />
      );
    },
  })),
];

**Explanation:**

- For each column, we define a `renderCell` function.
- In `renderCell`, we:
  - Determine the `cellKey` to retrieve the cell's status.
  - Retrieve the `cellStatus` from `cellStatusMap`. If not found, we assume the cell is loading.
  - Fetch the cell's value from `props.row`.
  - Render the `ExtractCellFormatter`, passing in the necessary props.

---

## Step 5: Implementing Additional Custom Renderers

To create more custom renderers based on other properties of your data cells, you can follow a similar pattern. Here's how you can do it:

### **1. Define Additional Cell Status Properties**

Extend your `CellStatus` interface to include any new properties you need.

```typescript:src/components/extracts/datagrid/ExtractCellFormatter.tsx
export interface CellStatus {
  isLoading: boolean;
  isApproved: boolean;
  isRejected: boolean;
  isEdited: boolean;
  hasComment: boolean; // New property
  needsReview: boolean; // New property
  originalData: any;
  correctedData: any;
  error?: any;
}

const status: CellStatus = {
  // ... existing properties ...
  hasComment: Boolean(cell.comment),
  needsReview: Boolean(cell.needsReview),
};

// ... existing logic ...

### **3. Update the Custom Cell Renderer to Handle New Properties**

Modify your `ExtractCellFormatter` to display additional icons or elements based on the new status properties.

```typescript:src/components/extracts/datagrid/ExtractCellFormatter.tsx
export const ExtractCellFormatter: React.FC<ExtractCellFormatterProps> = ({
  value,
  cellStatus,
  onApprove,
  onReject,
  onEdit,
}) => {
  // ... existing code ...

  return (
    <div style={cellStyle}>
      {value}
      {cellStatus.hasComment && (
        <Icon name="comment" color="grey" style={{ marginLeft: "auto" }} />
      )}
      {cellStatus.needsReview && (
        <Icon name="exclamation circle" color="orange" style={{ marginLeft: "auto" }} />
      )}
      {/* Existing status icons */}
      {cellStatus.isApproved && (
        <Icon name="check" color="green" style={{ marginLeft: "auto" }} />
      )}
      {cellStatus.isRejected && (
        <Icon name="x" color="red" style={{ marginLeft: "auto" }} />
      )}
      {cellStatus.isEdited && (
        <Icon name="edit" color="blue" style={{ marginLeft: "auto" }} />
      )}
    </div>
  );
};

**Update the Column Definition:**

```typescript:src/components/extracts/datagrid/DataGrid.tsx
// ... imports ...

import { DateCellFormatter } from "./DateCellFormatter";

// ... other code ...

const gridColumns = useMemo(() => {
  return [
    // ... other columns ...
    {
      key: "dateColumn",
      name: "Date",
      width: 150,
      renderCell: (props: any) => {
        const value = props.row["dateColumn"];
        return <DateCellFormatter value={value} />;
      },
    },
    // ... other columns ...
  ];
}, [/* dependencies */]);

const handleApprove = (cellKey: string) => {
  // Implement approval logic
};

const handleReject = (cellKey: string) => {
  // Implement rejection logic
};

const handleEdit = (cellKey: string) => {
  // Implement edit logic
};

renderCell: (props: any) => {
  const cellKey = `${props.row.documentId}-${col.id}`;
  // ... existing code ...

  return (
    <ExtractCellFormatter
      // ... existing props ...
      onApprove={() => handleApprove(cellKey)}
      onReject={() => handleReject(cellKey)}
      onEdit={() => handleEdit(cellKey)}
    />
  );
},