Implementation:Ucbepic Docetl SearchableCell

Knowledge Sources	Ucbepic_Docetl
Domains	Frontend, React_UI
Last Updated	2026-02-08 00:00 GMT

Overview

Concrete tool for the in-cell search component that provides find-and-navigate functionality within table cells.

Description

The SearchableCell component wraps cell content with a sticky search bar that supports regex-based text search, match highlighting with custom CSS injection, match count display, and previous/next navigation between matches. When no search is active, content is rendered as markdown via MarkdownCell. During search, matches are highlighted using HTML mark tags with dynamic CSS styling based on the current match index. The component supports both default content rendering and custom render functions via the children prop.

Usage

Used by ResizableDataTable and ColumnDialog to provide searchable content within individual data cells.

Code Reference

Source Location

• Repository: Ucbepic_Docetl
• File: website/src/components/SearchableCell.tsx
• Lines: 1-170

Signature

interface SearchableCellProps {
  content: string;
  isResizing: boolean;
  children?: (searchTerm: string) => React.ReactNode;
}

export const SearchableCell = React.memo(({ content, isResizing, children }: SearchableCellProps) => { ... })

Import

import { SearchableCell } from "@/components/SearchableCell";

I/O Contract

Inputs (Props)

Name	Type	Required	Description
content	string	Yes	Text content to display and search within
isResizing	boolean	Yes	Whether the parent column is currently being resized
children	(searchTerm: string) => ReactNode	No	Optional custom render function

Outputs

Name	Type	Description
rendered	JSX.Element	Cell content with search bar and match navigation

Usage Examples

<SearchableCell content={cellValue} isResizing={false} />

// With custom renderer:
<SearchableCell content={cellValue} isResizing={false}>
  {(searchTerm) => <CustomRenderer text={cellValue} highlight={searchTerm} />}
</SearchableCell>

Related Pages

• Environment:Ucbepic_Docetl_Frontend_Node_Environment