flowdeck/app/templates/_database_table.html

<!-- ═══════════ Database Table View (Notion-style) — Vanilla JS ═══════════ -->
<div id="db-table-container" class="database-table-container">
    <!-- View Selector Bar -->
    <div id="db-view-bar" class="db-view-bar">
        <div class="db-view-tabs">
            <button id="db-view-tab-table" class="db-view-tab active">
                {{ fd_icon("grid",14) }} Table
            </button>
            <button id="db-view-add-btn" class="db-view-add" title="Add a view">
                {{ fd_icon("plus",14) }}
            </button>
            <div id="db-add-view-dropdown" class="db-dropdown" style="display:none">
                <div class="db-dropdown-header">Add a new view</div>
                <div class="db-dropdown-item">{{ fd_icon("grid",14) }} Table</div>
                <div class="db-dropdown-item">{{ fd_icon("grid",14) }} Board</div>
                <div class="db-dropdown-item">{{ fd_icon("list",14) }} List</div>
                <div class="db-dropdown-item">{{ fd_icon("calendar",14) }} Calendar</div>
            </div>
        </div>
        <div class="db-view-actions">
            <button id="db-filter-btn" class="db-btn-icon" title="Filter">{{ fd_icon("search",14) }}</button>
            <button id="db-new-btn" class="db-btn-new">
                <span class="db-new-icon">{{ fd_icon("plus",12) }}</span> New
            </button>
        </div>
    </div>

    <!-- Database Table -->
    <div id="db-table-wrapper" class="db-table-wrapper">
        <table id="db-table" class="db-table">
            <thead id="db-thead"></thead>
            <tbody id="db-tbody"></tbody>
        </table>
    </div>

    <!-- Add Property Modal -->
    <div id="db-prop-modal" class="db-modal-overlay" style="display:none">
        <div class="db-modal">
            <div class="db-modal-header">
                <h3>Add a property</h3>
                <button id="db-prop-modal-close">{{ fd_icon("x",14) }}</button>
            </div>
            <div class="db-modal-body">
                <div class="db-modal-field">
                    <label>Name</label>
                    <input id="db-prop-name-input" type="text" placeholder="Property name" />
                </div>
                <div class="db-modal-field">
                    <label>Type</label>
                    <select id="db-prop-type-select">
                        <option value="text">Text</option>
                        <option value="number">Number</option>
                        <option value="select">Select</option>
                        <option value="multi_select">Multi-select</option>
                        <option value="date">Date</option>
                        <option value="checkbox">Checkbox</option>
                        <option value="url">URL</option>
                        <option value="email">Email</option>
                        <option value="phone">Phone</option>
                    </select>
                </div>
                <div class="db-modal-actions">
                    <button id="db-prop-cancel" class="db-btn-cancel">Cancel</button>
                    <button id="db-prop-create" class="db-btn-create">Create</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Column Header Context Menu -->
    <div id="db-col-menu" class="db-col-menu" style="display:none">
        <div class="db-col-menu-header">
            <span class="db-col-menu-icon" id="db-col-menu-icon">Aa</span>
            <span class="db-col-menu-name" id="db-col-menu-name">Name</span>
            <span class="db-col-menu-info" id="db-col-menu-info"></span>
        </div>
        <div class="db-col-menu-sep"></div>
        <div class="db-col-menu-item" id="db-col-show-icon">
            <span>😊 Show page icon</span>
            <span class="db-col-menu-toggle on" id="db-col-icon-toggle">● ON</span>
        </div>
        <div class="db-col-menu-sep"></div>
        <div class="db-col-menu-item has-sub" id="db-col-ai-autofill">
            <span>✨ AI Autofill</span>
            <span class="db-col-menu-hint">Now with agents</span>
            <span class="db-col-menu-arrow">›</span>
        </div>
        <div class="db-col-menu-sub" id="db-col-ai-sub" style="display:none">
            <div class="db-col-menu-item sub-item"><span>✨ Basic</span></div>
            <div class="db-col-menu-subnote">Not available for this property type</div>
            <div class="db-col-menu-sep"></div>
            <div class="db-col-menu-item sub-item"><span>🤖 Custom Agent</span><span class="db-col-menu-tag">New</span></div>
            <div class="db-col-menu-subnote">Uses advanced models to fill properties based on web search and your connected workspace.</div>
        </div>
        <div class="db-col-menu-sep"></div>
        <div class="db-col-menu-item" id="db-col-filter"><span>≡ Filter</span></div>
        <div class="db-col-menu-item has-sub" id="db-col-sort"><span>↕ Sort</span><span class="db-col-menu-arrow">›</span></div>
        <div class="db-col-menu-sub" id="db-col-sort-sub" style="display:none">
            <div class="db-col-menu-item sub-item"><span>↑ Sort ascending</span></div>
            <div class="db-col-menu-item sub-item"><span>↓ Sort descending</span></div>
        </div>
        <div class="db-col-menu-item" id="db-col-group"><span>▦ Group</span></div>
        <div class="db-col-menu-item has-sub" id="db-col-calc"><span>Σ Calculate</span><span class="db-col-menu-arrow">›</span></div>
        <div class="db-col-menu-sub" id="db-col-calc-sub" style="display:none">
            <div class="db-col-menu-item sub-item checked"><span>None</span></div>
            <div class="db-col-menu-item has-sub sub-item" id="db-col-calc-count"><span>Count</span><span class="db-col-menu-arrow">›</span></div>
            <div class="db-col-menu-sub" id="db-col-calc-count-sub" style="display:none">
                <div class="db-col-menu-item sub-item"><span>Count all</span></div>
                <div class="db-col-menu-item sub-item"><span>Count values</span></div>
                <div class="db-col-menu-item sub-item"><span>Count unique values</span></div>
                <div class="db-col-menu-item sub-item"><span>Count empty</span></div>
                <div class="db-col-menu-item sub-item"><span>Count not empty</span></div>
            </div>
            <div class="db-col-menu-item has-sub sub-item" id="db-col-calc-pct"><span>Percent</span><span class="db-col-menu-arrow">›</span></div>
            <div class="db-col-menu-sub" id="db-col-calc-pct-sub" style="display:none">
                <div class="db-col-menu-item sub-item"><span>Percent empty</span></div>
                <div class="db-col-menu-item sub-item"><span>Percent not empty</span></div>
            </div>
        </div>
        <div class="db-col-menu-sep"></div>
        <div class="db-col-menu-item" id="db-col-freeze"><span>🧊 Freeze</span></div>
        <div class="db-col-menu-item" id="db-col-wrap"><span>📝 Wrap content</span></div>
        <div class="db-col-menu-sep"></div>
        <div class="db-col-menu-item" id="db-col-insert-left"><span>├← Insert left</span></div>
        <div class="db-col-menu-item" id="db-col-insert-right"><span>→┤ Insert right</span></div>
    </div>

    <!-- Side Peek Panel for Database Pages -->
    <div id="db-side-peek" class="db-side-peek" style="display:none">
        <div class="db-side-peek-resize" id="db-side-peek-resize"></div>
        <div class="db-side-peek-header">
            <button id="db-side-peek-close" class="db-side-peek-close">×</button>
            <button id="db-side-peek-full" class="db-side-peek-full" title="Open full page">↗</button>
        </div>
        <iframe id="db-side-peek-iframe" src="" style="width:100%;height:100%;border:none"></iframe>
    </div>
</div>