# tableberg/1.1.5/src/components/SortPreviewBanner.tsx

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

- Page: https://pluginprobe.com/plugins/tableberg/1.1.5/code/src/components/SortPreviewBanner.tsx
- Raw: https://pluginprobe.com/plugins/tableberg/1.1.5/raw/src/components/SortPreviewBanner.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/SortPreviewBanner.tsx#L10-L20`.

```tsx
import { __ } from "@wordpress/i18n";
import { Button } from "@wordpress/components";
import { useTableStore } from "../store";

export function SortPreviewBanner() {
    const sortPreviewMode = useTableStore(state => state.sortPreviewMode);
    const exitSortPreviewMode = useTableStore(
        state => state.exitSortPreviewMode
    );

    if (!sortPreviewMode) {
        return null;
    }

    return (
        <div
            style={{
                display: "flex",
                alignItems: "center",
                justifyContent: "space-between",
                padding: "8px 12px",
                backgroundColor: "#f0f0f1",
                borderBottom: "1px solid #c3c4c7",
                fontSize: "13px",
            }}
        >
            <div style={{ display: "flex", alignItems: "center", gap: "8px" }}>
                <span
                    style={{
                        fontWeight: 500,
                        color: "#1e1e1e",
                    }}
                >
                    {__("Sort Preview Mode", "tableberg")}
                </span>
            </div>
            <Button variant="secondary" onClick={exitSortPreviewMode}>
                {__("Exit Sorting Preview", "tableberg")}
            </Button>
        </div>
    );
}

```