# tableberg/1.1.5/src/components/TableCaption/index.tsx

Tableberg – Simple Gutenberg Table Block, version 1.1.5. 45 lines.

- Page: https://pluginprobe.com/plugins/tableberg/1.1.5/code/src/components/TableCaption/index.tsx
- Raw: https://pluginprobe.com/plugins/tableberg/1.1.5/raw/src/components/TableCaption/index.tsx
- Modified: 2026-09-16T03:30:32+00:00

Line numbers below start at 1. Link to a line or a range by appending a fragment to the
page URL, for example `https://pluginprobe.com/plugins/tableberg/1.1.5/code/src/components/TableCaption/index.tsx#L10-L20`.

```tsx
import { useEffect } from "react";
import { RichText } from "@wordpress/block-editor";
import { __ } from "@wordpress/i18n";
import { useTableStore } from "../../store";

interface TableCaptionProps {
    isSelected: boolean;
}

export function TableCaption({ isSelected }: TableCaptionProps) {
    const caption = useTableStore(state => state.table.caption || "");
    const updateTable = useTableStore(state => state.updateTable);
    const showCaption = useTableStore(state => state.showCaption);
    const setShowCaption = useTableStore(state => state.setShowCaption);

    useEffect(() => {
        if (caption.trim() !== "" && !showCaption) {
            setShowCaption(true);
        }
    }, [caption, showCaption, setShowCaption]);

    useEffect(() => {
        if (!isSelected && caption.trim() === "" && showCaption) {
            setShowCaption(false);
        }
    }, [isSelected, caption, setShowCaption, showCaption]);

    if (!showCaption && caption.trim() === "") {
        return null;
    }

    return (
        <RichText
            tagName="figcaption"
            className="tableberg-table-caption wp-element-caption"
            aria-label={__("Table caption text", "tableberg")}
            placeholder={__("Add caption", "tableberg")}
            value={caption}
            onChange={(value: string) => {
                updateTable({ caption: value });
            }}
        />
    );
}

```