[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"marketplace-site-banners":3,"github-stars":9,"directus-extension-super-table":115},[4],{"id":5,"icon":6,"content":7,"link":8,"include_paths":6,"exclude_paths":6},"5cf2f5f6-aecf-4395-8c23-69de326fdf02",null,"DIRECTUS V12 IS HERE","https:\u002F\u002Fdirectus.com\u002Fresources\u002Fv12-built-for-the-whole-team",{"id":10,"node_id":11,"name":12,"full_name":13,"private":14,"owner":15,"html_url":33,"description":34,"fork":14,"url":35,"forks_url":36,"keys_url":37,"collaborators_url":38,"teams_url":39,"hooks_url":40,"issue_events_url":41,"events_url":42,"assignees_url":43,"branches_url":44,"tags_url":45,"blobs_url":46,"git_tags_url":47,"git_refs_url":48,"trees_url":49,"statuses_url":50,"languages_url":51,"stargazers_url":52,"contributors_url":53,"subscribers_url":54,"subscription_url":55,"commits_url":56,"git_commits_url":57,"comments_url":58,"issue_comment_url":59,"contents_url":60,"compare_url":61,"merges_url":62,"archive_url":63,"downloads_url":64,"issues_url":65,"pulls_url":66,"milestones_url":67,"notifications_url":68,"labels_url":69,"releases_url":70,"deployments_url":71,"created_at":72,"updated_at":73,"pushed_at":74,"git_url":75,"ssh_url":76,"clone_url":77,"svn_url":33,"homepage":78,"size":79,"stargazers_count":80,"watchers_count":80,"language":81,"has_issues":82,"has_projects":82,"has_downloads":14,"has_wiki":14,"has_pages":14,"has_discussions":82,"forks_count":83,"mirror_url":6,"archived":14,"disabled":14,"open_issues_count":84,"license":85,"allow_forking":82,"is_template":14,"web_commit_signoff_required":14,"has_pull_requests":82,"pull_request_creation_policy":90,"topics":91,"visibility":32,"forks":83,"open_issues":84,"watchers":80,"default_branch":111,"temp_clone_token":6,"custom_properties":112,"organization":113,"network_count":83,"subscribers_count":114},7122594,"MDEwOlJlcG9zaXRvcnk3MTIyNTk0","directus","directus\u002Fdirectus",false,{"login":12,"id":16,"node_id":17,"avatar_url":18,"gravatar_id":19,"url":20,"html_url":21,"followers_url":22,"following_url":23,"gists_url":24,"starred_url":25,"subscriptions_url":26,"organizations_url":27,"repos_url":28,"events_url":29,"received_events_url":30,"type":31,"user_view_type":32,"site_admin":14},15967950,"MDEyOk9yZ2FuaXphdGlvbjE1OTY3OTUw","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F15967950?v=4","","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus","https:\u002F\u002Fgithub.com\u002Fdirectus","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Ffollowers","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Ffollowing{\u002Fother_user}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fgists{\u002Fgist_id}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fstarred{\u002Fowner}{\u002Frepo}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fsubscriptions","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Forgs","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Frepos","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Fevents{\u002Fprivacy}","https:\u002F\u002Fapi.github.com\u002Fusers\u002Fdirectus\u002Freceived_events","Organization","public","https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus","The flexible backend for all your projects 🐰 Turn your DB into a headless CMS, admin panels, or apps with a custom UI, instant APIs, auth & more.","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fforks","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fkeys{\u002Fkey_id}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcollaborators{\u002Fcollaborator}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fteams","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fhooks","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues\u002Fevents{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fevents","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fassignees{\u002Fuser}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fbranches{\u002Fbranch}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Ftags","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Fblobs{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Ftags{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Frefs{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Ftrees{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fstatuses\u002F{sha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Flanguages","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fstargazers","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcontributors","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fsubscribers","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fsubscription","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcommits{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fgit\u002Fcommits{\u002Fsha}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcomments{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues\u002Fcomments{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcontents\u002F{+path}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fcompare\u002F{base}...{head}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fmerges","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002F{archive_format}{\u002Fref}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fdownloads","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fissues{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fpulls{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fmilestones{\u002Fnumber}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fnotifications{?since,all,participating}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Flabels{\u002Fname}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Freleases{\u002Fid}","https:\u002F\u002Fapi.github.com\u002Frepos\u002Fdirectus\u002Fdirectus\u002Fdeployments","2012-12-12T01:35:36Z","2026-07-27T01:27:08Z","2026-07-25T07:55:56Z","git:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","git@github.com:directus\u002Fdirectus.git","https:\u002F\u002Fgithub.com\u002Fdirectus\u002Fdirectus.git","https:\u002F\u002Fdirectus.com",447974,36900,"TypeScript",true,4862,399,{"key":86,"name":87,"spdx_id":88,"url":6,"node_id":89},"other","Other","NOASSERTION","MDc6TGljZW5zZTA=","all",[92,93,94,95,96,97,12,98,99,100,101,102,103,104,105,106,107,108,109,110],"api","app","cms","composable","data-visualization","database","graphql","headless-cms","javascript","mariadb","mssql","mysql","no-code","node","postgresql","sql","sqlite","typescript","vue","main",{},{"login":12,"id":16,"node_id":17,"avatar_url":18,"gravatar_id":19,"url":20,"html_url":21,"followers_url":22,"following_url":23,"gists_url":24,"starred_url":25,"subscriptions_url":26,"organizations_url":27,"repos_url":28,"events_url":29,"received_events_url":30,"type":31,"user_view_type":32,"site_admin":14},328,{"name":116,"description":117,"verified":14,"id":118,"readme":119,"type":120,"last_updated":121,"host_version":122,"downloads":123,"total_downloads":124,"sandbox":82,"license":125,"publisher":126,"versions":129,"formatted_name":301,"formatted_readme":302,"formatted_description":117,"featured_image":303,"images":304,"repository_url":135,"recent_downloads_7_days":124,"recent_downloads_30_days":124},"directus-extension-super-table","A powerful and feature-rich table layout extension for Directus 11+ with inline editing, quick filters, and manual sorting","7d8b0120-58a6-45e1-a385-ce0cce68e0ac","# Super Layout Table Extension for Directus\n\n![Version](https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002FsmartlabsAT\u002Fdirectus-super-table)\n![License](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-green)\n![npm downloads](https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fdirectus-extension-super-table)\n![Quality Checks](https:\u002F\u002Fgithub.com\u002FsmartlabsAT\u002Fdirectus-super-table\u002Fworkflows\u002FQuality%20Checks\u002Fbadge.svg)\n![TypeScript](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-Strict-blue)\n![ESLint](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FESLint-0%20errors-brightgreen)\n![Prettier](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fcode%20style-prettier-ff69b4)\n![Directus](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDirectus-v11+-00B896)\n\nA powerful and feature-rich table layout extension for Directus 11 and 12 that enhances the default table view with advanced functionality including inline editing, quick filters, shareable saved views, and custom cell rendering.\n\n\n![Super Table Demo](https:\u002F\u002Fraw.githubusercontent.com\u002FsmartlabsAT\u002Fdirectus-super-table\u002Fmain\u002Fdemo\u002Fsuper-table-demo.gif)\n\nSee [CHANGELOG.md](.\u002FCHANGELOG.md) for version history.\n\n## 🌟 Top Features\n\n### 🌍 Multi-Language Translations\nDisplay and edit translations in multiple languages simultaneously as separate columns. Perfect for managing multilingual content with ease.\n\n### ✏️ Column Renaming\nRename table columns on-the-fly without changing the underlying field names. Create user-friendly labels for better readability.\n\n### 🎨 Quick Filters with Colors & Icons\nCreate custom filter buttons with personalized colors and icons for instant data filtering. Visual organization at its best.\n\n### 🔖 Saved & Shared Views\nSave the current table view (columns, filters, sort, search) as a native bookmark — and, as an admin, share it with **specific roles and\u002For users** in one step (or with everyone). Recipients get the exact same view in their own navigation.\n\n### 🔍 Global Table Search\nPowerful search functionality across all table fields, including nested relations and translations. Find anything, anywhere in your data.\n\n### 👁️ View & Edit Mode\nSwitch seamlessly between read-only view mode and interactive edit mode. Control when and how users can modify data.\n\n### 🖼️ Advanced Image Display & Selection\nSmart image handling with an enlarged hover preview, proper aspect ratios, and a built-in file browser for selecting media files directly from table cells.\n\n### 🔄 Deep Duplication\nDuplicate items with all their relationships and translations. Perfect for creating variations of complex data structures.\n\n### 🧩 Many-to-Any (M2A) Display\nRender polymorphic Many-to-Any relationships directly in the table — built straight from the native field picker or by hand. Use `{{item:\u003Ccollection>.\u003Cfield>}}` for a target's fields (nested chains like `{{item:partners_catalog.catalog_id.title}}` work), `{{collection}}` for the discriminator, and bare tokens like `{{code}}` for parent-row fields. Each junction row resolves against its own target collection.\n\n\n\n### Display Features\n- **Custom Cell Rendering** - Specialized display for different field types\n- **Relationship Support** - Handle M2O, O2M, M2M, M2A relationships with deep data access\n- **Image Preview** - Inline image display with an enlarged hover preview and file browser\n- **Tag Support** - Automatic detection and display of tag fields as visual chips with inline popover editor for adding\u002Fremoving tags\n- **Status Indicators** - Visual representation of boolean and select fields\n- **Translation Support** - Display multiple language translations as separate columns\n- **Column Alignment** - Configurable text alignment per column (left, center, right)\n\n### Performance\n- **Native Pagination** - Server-side pagination with selectable page sizes (25, 50, 100, 250, 500, 1000; default 25)\n- **Separate Count Query** - Item count is fetched independently so the table still renders when the count query is restricted by permissions\n\n\n## Installation\n\nFor detailed information about installing extensions in Directus, see the [official documentation](https:\u002F\u002Fdirectus.io\u002Fdocs\u002Fself-hosting\u002Fincluding-extensions).\n\n### Via Package Manager (Recommended)\n\nInstall the extension using your preferred package manager:\n\n```bash\n# Using pnpm\npnpm add directus-extension-super-table\n\n# Using npm\nnpm install directus-extension-super-table\n\n# Using yarn\nyarn add directus-extension-super-table\n```\n\nAfter installation, restart Directus to load the extension:\n\n```bash\n# If using Docker\ndocker-compose restart directus\n\n# If running locally\nnpx directus start\n```\n\n### From Source\n\n1. Clone or download the extension to your Directus extensions folder:\n   ```bash\n   cd \u002Fpath\u002Fto\u002Fdirectus\u002Fextensions\n   git clone https:\u002F\u002Fgithub.com\u002FsmartlabsAT\u002Fdirectus-super-table.git\n   ```\n\n2. Install dependencies:\n   ```bash\n   cd directus-super-table\n   pnpm install  # or npm install\n   ```\n\n3. Build the extension:\n   ```bash\n   pnpm build  # or npm run build\n   ```\n\n4. Restart Directus to load the extension\n\n### Configuration\n\n1. Open a collection in the Directus Content module\n2. Open the layout dropdown in the sidebar\n3. Select **\"Super Table\"** as the layout\n4. Configure the layout options in the **Layout Options** sidebar panel\n\n## Usage Guide\n\n### Quick Filters\nQuick Filters provide fast access to frequently used filter combinations:\n\n1. **Creating a Filter**: Click the \"+\" button in the Quick Filters section\n2. **Configure Filter**: Set field, operator, and value\n3. **Save Filter**: Give it a name and optional color\n4. **Using Filters**: Click filter buttons to toggle them on\u002Foff\n5. **Filter States**: \n   - Gray (OFF) - Filter not applied\n   - Blue (Active) - Filter applied with visual indicators\n\n### Inline Editing\nEdit data directly in the table without opening a separate form:\n\n1. **Entering Edit Mode**: Enable \"Edit Mode\" in the **Layout Options** sidebar (or the edit toggle in the table header), then click an editable cell\n2. **Editor Types**:\n   - Text fields: Simple input or WYSIWYG editor\n   - Boolean: Checkbox toggle\n   - Select: Dropdown menu\n   - Date\u002FTime: Full date picker with calendar\n   - Color: Color picker with alignment support\n   - Image\u002FFile: File browser with larger previews\n3. **Unified Header Actions**:\n   - Save\u002FCancel buttons in the popover header for all field types\n   - Consistent UI across all editors\n   - Icon-only buttons matching native Directus style\n4. **Saving**: Click save button (✓) or press Enter\n5. **Canceling**: Click cancel button (✗) or press Escape\n\n> **Note:** Relational fields (M2O, O2M, M2M, M2A) are display-only and are not\n> editable inline — open the item detail view to edit them.\n\n### Column Management\nCustomize which columns are displayed and how:\n\n1. **Add Columns**: Click \"+\" button in the table header\n2. **Remove Columns**: Use column selector to hide columns\n3. **Rename Columns**: Right-click header and select \"Rename\"\n4. **Reorder Columns**: Drag column headers to reorder\n5. **Resize Columns**: Drag column borders to resize\n\n### Column Displays\nOverride how a column renders by attaching a display template, configured in the\nsidebar under **Layout Options → Column Displays**:\n\n1. **Add a display**: Click \"Add Column Display\", pick a column, and enter a template\n2. **Edit \u002F Remove**: Click an existing entry to edit it, or the ✗ icon to remove it\n3. **Templates** use the `{{ field }}` mustache syntax and may reference related fields\n\n#### Many-to-Any (M2A) templates\nM2A fields are polymorphic — each junction row points at one of several target\ncollections. Build the template straight from the **native field picker** (it now\nresolves correctly), or write tokens by hand. Tokens resolve per junction row; on a\nname clash the most specific (deepest) match wins:\n\n- `{{item:\u003Ccollection>.\u003Cfield>}}` — a field on a specific target collection;\n  nested paths work, e.g. `{{item:partners_catalog.catalog_id.title}}` (M2A → M2O → value)\n- `{{collection}}` — the name of the row's target collection (the discriminator)\n- The field-key-prefixed forms the picker emits also work, e.g.\n  `{{treatment.collection}}`, `{{treatment.item:service.name}}`, or a junction\n  column like `{{treatment.sort}}`\n- `{{\u003CparentField>}}` — a bare token reads a field on the parent row, e.g.\n  `{{code}}` shows the order's own code next to each item\n- **Deep paths through the target work too**, including a `translations`\n  relation stored inside the target: `{{item:service.translations.label}}`.\n  Add a `:lang` suffix to choose the language (`…translations.label:de-DE`);\n  without it the current user's language is used. The `:lang` suffix is\n  honored on M2A `item:` tokens only; on other relational columns it is not\n  interpreted (and an invalid path is dropped rather than sent to the API).\n\nEach junction row only resolves the item token whose `\u003Ccollection>` matches its own\ntarget, so a template can cover every allowed collection at once:\n\n```\n{{collection}}: {{item:partners_catalog.name}} {{item:service.name}}\n```\n\nThe editor shows the allowed collections and an example for the selected field.\n\n### Bookmarks\nSave table configurations for quick access:\n\n1. **Save Bookmark**: Configure table, then click bookmark icon → \"Save Current\"\n2. **Load Bookmark**: Select from bookmark dropdown\n3. **Update Bookmark**: Load bookmark, make changes, save with same name\n4. **Delete Bookmark**: Right-click bookmark and select delete\n\n### Shared Views (Save & Share)\nSave the current view and choose who can see it:\n\n1. **Save view**: Click the **Save view** button in the header → name it, optionally pick an icon\u002Fcolor, and choose a scope.\n2. **Scopes**: **Just me** (personal), **Everyone** (global), or **Specific targets** (admins only) — select any number of **roles** and\u002For **users** to share with.\n3. **Re-saving** the same name updates the shared view in place (no duplicates).\n4. **Visibility**: each recipient sees the shared view once in their own bookmark navigation. Non-admins only ever see the \"Just me\" option.\n\n## Project Structure\n\n```\nsuper-layout-table\u002F\n├── index.ts                          # Extension entry point (defineLayout)\n├── src\u002F\n│   ├── super-table.vue               # Main layout component\n│   ├── options.vue                   # Sidebar layout options\n│   ├── actions.vue                   # Row\u002Fbulk actions component\n│   ├── components\u002F\n│   │   ├── InlineEditPopover.vue     # Inline editor popover\n│   │   ├── QuickFilters.vue          # Quick filter management\n│   │   ├── ColumnDisplaysSection.vue # Column-display list + editor\n│   │   ├── ColumnDisplayEditor.vue   # Single column-display form\n│   │   ├── EditableCellRelational.vue# Relational\u002FM2A cell rendering\n│   │   └── CellRenderers\u002F            # Custom cell renderers (image, select, …)\n│   ├── composables\u002F\n│   │   ├── api.ts                    # API operations (useTableApi)\n│   │   ├── useAliasFields.ts         # Field aliasing logic\n│   │   ├── useColumnDisplays.ts      # Column-display override CRUD\n│   │   └── …                         # pagination, sort, permissions, translations\n│   └── utils\u002F\n│       ├── adjustFieldsForDisplays.ts# Display field expansion (incl. M2A)\n│       ├── displayHeuristics.ts      # Template tokenising + relation helpers\n│       ├── resolveM2ARelation.ts     # M2A junction-shape resolver\n│       └── getDefaultDisplayForType.ts# Default display mapping\n├── tests\u002F                            # Vitest unit tests\n├── package.json                      # Package configuration\n├── tsconfig.json                     # TypeScript configuration\n└── README.md                         # This file\n```\n\n## Development\n\n### Prerequisites\n- Node.js 20+ (CI runs on 20.x and 22.x)\n- pnpm package manager\n- Directus 11 and 12 (verified on 11.11.0 and 12.0.2)\n\n### Setup Development Environment\n```bash\n# Install dependencies\npnpm install\n\n# Start development build with watch mode\npnpm dev\n\n# Build for production\npnpm build\n\n# Run linter\npnpm lint\n\n# Type checking\npnpm type-check\n\n# Run all quality checks\npnpm quality\n\n# Fix linting issues\npnpm lint:fix\n\n# Format code\npnpm format\n```\n\n## 🚀 GitHub Actions & CI\u002FCD\n\nThis extension includes comprehensive GitHub Actions workflows for maintaining code quality:\n\n### Automated Quality Checks\nEvery push and pull request triggers automated quality validation:\n\n- **TypeScript Type Checking** - Ensures type safety across the codebase\n- **ESLint** - Enforces code quality standards (0 errors, 0 warnings)\n- **Prettier** - Validates consistent code formatting\n- **Build Validation** - Confirms the extension builds successfully\n\n### Workflow Files\n\n```\n.github\u002Fworkflows\u002F\n├── ci.yml              # CI\u002FCD pipeline (build, test, quality on Node 20.x & 22.x)\n├── quality-checks.yml  # Type-check, lint, format, build (push\u002FPR)\n├── test.yml            # Vitest unit tests\n├── pr-checks.yml       # PR-specific checks with auto-comments\n├── release.yml         # Automated release creation on version tags\n└── badges.yml          # Status badge updates\n```\n\n### Running Locally\nYou can run the same checks locally before pushing:\n\n```bash\n# Run all quality checks at once\npnpm run quality\n\n# Individual checks\npnpm run type-check    # TypeScript validation\npnpm run lint          # ESLint checks\npnpm run format:check  # Prettier validation\npnpm run build         # Build test\n```\n\n### Pull Request Workflow\n1. Create your feature branch\n2. Make your changes\n3. Run `pnpm run quality` locally\n4. Push to GitHub\n5. GitHub Actions will automatically validate your code\n6. PR will receive an automated quality report comment\n\n### Layout Options\nThe layout persists these options (those marked *(sidebar)* have a control in the\n**Layout Options** panel; the rest are set through table interactions):\n\n```typescript\n{\n  showToolbar?: boolean;          \u002F\u002F (sidebar) show the toolbar with actions\n  editMode?: boolean;             \u002F\u002F (sidebar) enable inline editing\n  directBooleanToggle?: boolean;  \u002F\u002F (sidebar, requires editMode) single-click boolean toggle\n  languageCodeField?: string;     \u002F\u002F (sidebar) language-code field for translations (default 'languages_code')\n  customFieldNames?: Record\u003Cstring, string>;                 \u002F\u002F per-column header label overrides\n  columnDisplays?: Record\u003Cstring, { template: string; display?: string }>; \u002F\u002F per-column display templates\n  showSelect?: boolean;           \u002F\u002F show row-selection checkboxes\n  spacing?: 'compact' | 'cozy' | 'comfortable';              \u002F\u002F row height\n  align?: Record\u003Cstring, 'left' | 'center' | 'right'>;       \u002F\u002F per-column text alignment\n  widths?: Record\u003Cstring, number>;                           \u002F\u002F per-column widths\n  quickFilters?: QuickFilter[];   \u002F\u002F saved quick filters\n}\n```\n\n## API Reference\n\n### Events\nAs a Directus layout, the component emits the standard layout sync events:\n\n- `update:selection` - When item selection changes\n- `update:layoutOptions` - When a layout option changes (column displays, edit mode, alignment, widths, …)\n- `update:layoutQuery` - When the query changes (fields, sort, page, limit)\n- `update:search` - When the search query changes\n\nThe `filter` prop is consumed read-only (filtering is driven by Directus), so no\n`update:filter` event is emitted.\n\n### Composables\nAvailable composables for extension development:\n\n- `useTableApi()` - API operations wrapper (fetch, count, update, delete, export)\n- `useAliasFields()` - Field aliasing for complex queries\n- `useColumnDisplays()` - Per-column display-template overrides\n\n## Browser Support\n\n- Chrome 90+\n- Firefox 88+\n- Safari 14+\n- Edge 90+\n\n## Contributing\n\nContributions are welcome! Please follow these guidelines:\n\n1. Fork the repository\n2. Create a feature branch\n3. Make your changes\n4. Add\u002Fupdate tests as needed\n5. Submit a pull request\n\n### Code Style\n- Use TypeScript with explicit types\n- Follow Vue 3 Composition API patterns\n- Maintain consistent code formatting\n- Add JSDoc comments for public APIs\n\n## Troubleshooting\n\n### Extension not loading\n- Ensure the extension is in the correct directory\n- Check Directus logs for errors\n- Verify all dependencies are installed\n- Try clearing browser cache\n\n### Inline editing not working\n- Make sure \"Edit Mode\" is enabled in the Layout Options sidebar\n- Check field permissions in Directus (no update permission = read-only)\n- Ensure fields are not configured as read-only\n- Note: relational fields (M2O, O2M, M2M, M2A) are display-only by design\n\n### Performance issues\n- Choose a smaller page size (the per-page selector defaults to 25)\n- Check the browser console for errors\n\n## Changelog\n\nSee [CHANGELOG.md](.\u002FCHANGELOG.md) for a detailed version history.\n\n## License\n\nMIT License - See LICENSE file for details\n\n## Support\n\nFor issues, questions, or feature requests, please create an issue in the repository.\n\n## Credits\n\nBuilt for Directus 11+ by the community.\nSpecial thanks to all contributors and testers.","layout","2026-07-02T07:26:05.932Z","^11.0.0 || ^12.0.0",[],0,"MIT",{"username":127,"verified":14,"id":128,"github_username":6,"github_name":6,"github_blog":6,"github_bio":6,"github_location":6,"github_company":6,"github_avatar_url":6},"smartlabsat","d4e8382f-5b49-4335-ae9b-0998cd46e5f1",[130,143,151,159,167,175,182,189,197,205,213,221,229,237,245,253,261,269,277,285,293],{"version":131,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":133,"verified":14,"id":134,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":139,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":140,"maintainers":141},"0.2.8","^11.0.0","2025-08-22T00:15:46.680Z","1d21a5c3-89ec-4204-9f80-07075aefdc54","https:\u002F\u002Fgithub.com\u002FsmartlabsAT\u002Fdirectus-super-table.git","https:\u002F\u002Fgithub.com\u002FsmartlabsAT\u002Fdirectus-super-table#readme","https:\u002F\u002Fgithub.com\u002FsmartlabsAT\u002Fdirectus-super-table\u002Fissues",4,426393,[],[142],12914,{"version":144,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":145,"verified":14,"id":146,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":147,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":148,"maintainers":149},"0.2.10","2025-08-30T09:03:14.424Z","21c416cb-2972-4559-8fd4-70e30000b869",426306,[],[150],12938,{"version":152,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":153,"verified":14,"id":154,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":155,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":156,"maintainers":157},"0.2.18","2026-04-04T08:50:12.968Z","378ae630-d21e-4ad6-97d2-809e2eb6a56d",477821,[],[158],14128,{"version":160,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":161,"verified":14,"id":162,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":163,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":164,"maintainers":165},"0.3.0","2026-05-09T13:13:54.501Z","38aacb5d-23df-4b86-829f-cc45d2fb9c45",489815,[],[166],14394,{"version":168,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":169,"verified":14,"id":170,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":171,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":172,"maintainers":173},"0.4.2","2026-05-27T18:44:25.384Z","3abc10d1-f74a-44d0-9f13-ee61b11a0bac",496067,[],[174],14495,{"version":176,"package":118,"publisher":128,"type":120,"host_version":122,"publish_date":121,"verified":14,"id":177,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":178,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":179,"maintainers":180},"0.6.4","4cc6569e-905f-44c2-9249-9b585ae763ea",539137,[],[181],14651,{"version":183,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":184,"verified":14,"id":185,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":163,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":186,"maintainers":187},"0.3.2","2026-05-09T17:31:01.046Z","6298a8ef-dd1d-44dd-89c1-6bfa972c7e5c",[],[188],14396,{"version":190,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":191,"verified":14,"id":192,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":193,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":194,"maintainers":195},"0.5.0","2026-06-01T09:15:04.863Z","6f141778-4178-484d-ac2d-9d8c586cbad9",504411,[],[196],14524,{"version":198,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":199,"verified":14,"id":200,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":201,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":202,"maintainers":203},"0.4.0","2026-05-18T19:16:02.600Z","7d18737c-13ba-45a8-a428-0da77c4d77e4",495240,[],[204],14419,{"version":206,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":207,"verified":14,"id":208,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":209,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":210,"maintainers":211},"0.2.11","2025-09-09T14:18:15.859Z","a7524a2c-955f-4eed-bc78-dd0c0a6efd5e",425480,[],[212],12999,{"version":214,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":215,"verified":14,"id":216,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":217,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":218,"maintainers":219},"0.5.1","2026-06-01T23:18:55.424Z","ad3f0bae-dfc9-4a3a-bd7d-f5702a6b1a4e",505200,[],[220],14533,{"version":222,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":223,"verified":14,"id":224,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":225,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":226,"maintainers":227},"0.2.12","2025-09-10T10:08:48.461Z","afc25fe5-6bca-4b47-88ad-cb008df3ec1f",428626,[],[228],13010,{"version":230,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":231,"verified":14,"id":232,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":233,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":234,"maintainers":235},"0.4.1","2026-05-24T22:28:27.150Z","b604e7b8-78d2-4f9c-b199-6c124c3e4a38",496023,[],[236],14478,{"version":238,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":239,"verified":14,"id":240,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":241,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":242,"maintainers":243},"0.2.15","2025-10-27T19:12:18.496Z","bd67588a-3d23-4caf-8351-f8f6183fc673",430831,[],[244],13235,{"version":246,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":247,"verified":14,"id":248,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":249,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":250,"maintainers":251},"0.3.1","2026-05-09T15:27:02.261Z","c516e19c-c7d7-4c74-80b4-1ff8059b1545",489913,[],[252],14395,{"version":254,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":255,"verified":14,"id":256,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":257,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":258,"maintainers":259},"0.2.14","2025-10-09T07:20:16.446Z","db7ebb80-32be-42c3-9ddc-62135c39fd87",429587,[],[260],13165,{"version":262,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":263,"verified":14,"id":264,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":265,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":266,"maintainers":267},"0.2.9","2025-08-28T22:28:36.274Z","de32194a-cd70-4779-98ea-f4eb0e823148",426336,[],[268],12935,{"version":270,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":271,"verified":14,"id":272,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":273,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":274,"maintainers":275},"0.2.17","2026-03-04T17:27:50.735Z","e3cab9f4-22ba-4438-abcb-44c1b36de7c3",440820,[],[276],13862,{"version":278,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":279,"verified":14,"id":280,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":281,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":282,"maintainers":283},"0.6.3","2026-06-22T16:19:53.848Z","eb8e7323-6b24-46c8-9d7e-1ea4191b9c2f",518614,[],[284],14628,{"version":286,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":287,"verified":14,"id":288,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":289,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":290,"maintainers":291},"0.6.2","2026-06-13T15:16:17.183Z","f2076ead-8439-47f2-ad17-d11c4a2708e1",517823,[],[292],14593,{"version":294,"package":118,"publisher":128,"type":120,"host_version":132,"publish_date":295,"verified":14,"id":296,"url_repository":135,"url_homepage":136,"url_bugs":137,"file_count":138,"unpacked_size":297,"sandbox":82,"sandbox_requested_scopes":6,"license":125,"bundled":298,"maintainers":299},"0.2.16","2025-11-20T23:55:35.844Z","fe3cf5c2-e80c-45f9-9aeb-170511d44b28",432030,[],[300],13297,"Super Table","\u003Ch1>Super Layout Table Extension for Directus\u003C\u002Fh1>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fgithub\u002Fv\u002Frelease\u002FsmartlabsAT\u002Fdirectus-super-table\" alt=\"Version\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Flicense-MIT-green\" alt=\"License\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdt\u002Fdirectus-extension-super-table\" alt=\"npm downloads\">\n\u003Cimg src=\"https:\u002F\u002Fgithub.com\u002FsmartlabsAT\u002Fdirectus-super-table\u002Fworkflows\u002FQuality%20Checks\u002Fbadge.svg\" alt=\"Quality Checks\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FTypeScript-Strict-blue\" alt=\"TypeScript\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FESLint-0%20errors-brightgreen\" alt=\"ESLint\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fcode%20style-prettier-ff69b4\" alt=\"Prettier\">\n\u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FDirectus-v11+-00B896\" alt=\"Directus\">\u003C\u002Fp>\n\u003Cp>A powerful and feature-rich table layout extension for Directus 11 and 12 that enhances the default table view with advanced functionality including inline editing, quick filters, shareable saved views, and custom cell rendering.\u003C\u002Fp>\n\u003Cp>\u003Cimg src=\"https:\u002F\u002Fraw.githubusercontent.com\u002FsmartlabsAT\u002Fdirectus-super-table\u002Fmain\u002Fdemo\u002Fsuper-table-demo.gif\" alt=\"Super Table Demo\">\u003C\u002Fp>\n\u003Cp>See \u003Ca href=\".\u002FCHANGELOG.md\">CHANGELOG.md\u003C\u002Fa> for version history.\u003C\u002Fp>\n\u003Ch2>🌟 Top Features\u003C\u002Fh2>\n\u003Ch3>🌍 Multi-Language Translations\u003C\u002Fh3>\n\u003Cp>Display and edit translations in multiple languages simultaneously as separate columns. Perfect for managing multilingual content with ease.\u003C\u002Fp>\n\u003Ch3>✏️ Column Renaming\u003C\u002Fh3>\n\u003Cp>Rename table columns on-the-fly without changing the underlying field names. Create user-friendly labels for better readability.\u003C\u002Fp>\n\u003Ch3>🎨 Quick Filters with Colors & Icons\u003C\u002Fh3>\n\u003Cp>Create custom filter buttons with personalized colors and icons for instant data filtering. Visual organization at its best.\u003C\u002Fp>\n\u003Ch3>🔖 Saved & Shared Views\u003C\u002Fh3>\n\u003Cp>Save the current table view (columns, filters, sort, search) as a native bookmark — and, as an admin, share it with \u003Cstrong>specific roles and\u002For users\u003C\u002Fstrong> in one step (or with everyone). Recipients get the exact same view in their own navigation.\u003C\u002Fp>\n\u003Ch3>🔍 Global Table Search\u003C\u002Fh3>\n\u003Cp>Powerful search functionality across all table fields, including nested relations and translations. Find anything, anywhere in your data.\u003C\u002Fp>\n\u003Ch3>👁️ View & Edit Mode\u003C\u002Fh3>\n\u003Cp>Switch seamlessly between read-only view mode and interactive edit mode. Control when and how users can modify data.\u003C\u002Fp>\n\u003Ch3>🖼️ Advanced Image Display & Selection\u003C\u002Fh3>\n\u003Cp>Smart image handling with an enlarged hover preview, proper aspect ratios, and a built-in file browser for selecting media files directly from table cells.\u003C\u002Fp>\n\u003Ch3>🔄 Deep Duplication\u003C\u002Fh3>\n\u003Cp>Duplicate items with all their relationships and translations. Perfect for creating variations of complex data structures.\u003C\u002Fp>\n\u003Ch3>🧩 Many-to-Any (M2A) Display\u003C\u002Fh3>\n\u003Cp>Render polymorphic Many-to-Any relationships directly in the table — built straight from the native field picker or by hand. Use \u003Ccode>{{item:<collection>.<field>}}\u003C\u002Fcode> for a target's fields (nested chains like \u003Ccode>{{item:partners_catalog.catalog_id.title}}\u003C\u002Fcode> work), \u003Ccode>{{collection}}\u003C\u002Fcode> for the discriminator, and bare tokens like \u003Ccode>{{code}}\u003C\u002Fcode> for parent-row fields. Each junction row resolves against its own target collection.\u003C\u002Fp>\n\u003Ch3>Display Features\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Custom Cell Rendering\u003C\u002Fstrong> - Specialized display for different field types\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Relationship Support\u003C\u002Fstrong> - Handle M2O, O2M, M2M, M2A relationships with deep data access\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Image Preview\u003C\u002Fstrong> - Inline image display with an enlarged hover preview and file browser\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Tag Support\u003C\u002Fstrong> - Automatic detection and display of tag fields as visual chips with inline popover editor for adding\u002Fremoving tags\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status Indicators\u003C\u002Fstrong> - Visual representation of boolean and select fields\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Translation Support\u003C\u002Fstrong> - Display multiple language translations as separate columns\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Column Alignment\u003C\u002Fstrong> - Configurable text alignment per column (left, center, right)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Performance\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>\u003Cstrong>Native Pagination\u003C\u002Fstrong> - Server-side pagination with selectable page sizes (25, 50, 100, 250, 500, 1000; default 25)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Separate Count Query\u003C\u002Fstrong> - Item count is fetched independently so the table still renders when the count query is restricted by permissions\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Installation\u003C\u002Fh2>\n\u003Cp>For detailed information about installing extensions in Directus, see the \u003Ca href=\"https:\u002F\u002Fdirectus.io\u002Fdocs\u002Fself-hosting\u002Fincluding-extensions\">official documentation\u003C\u002Fa>.\u003C\u002Fp>\n\u003Ch3>Via Package Manager (Recommended)\u003C\u002Fh3>\n\u003Cp>Install the extension using your preferred package manager:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\"># Using pnpm\npnpm add directus-extension-super-table\n\n# Using npm\nnpm install directus-extension-super-table\n\n# Using yarn\nyarn add directus-extension-super-table\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>After installation, restart Directus to load the extension:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\"># If using Docker\ndocker-compose restart directus\n\n# If running locally\nnpx directus start\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>From Source\u003C\u002Fh3>\n\u003Col>\n\u003Cli>\n\u003Cp>Clone or download the extension to your Directus extensions folder:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">cd \u002Fpath\u002Fto\u002Fdirectus\u002Fextensions\ngit clone https:\u002F\u002Fgithub.com\u002FsmartlabsAT\u002Fdirectus-super-table.git\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Install dependencies:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">cd directus-super-table\npnpm install  # or npm install\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Build the extension:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\">pnpm build  # or npm run build\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003C\u002Fli>\n\u003Cli>\n\u003Cp>Restart Directus to load the extension\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Configuration\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Open a collection in the Directus Content module\u003C\u002Fli>\n\u003Cli>Open the layout dropdown in the sidebar\u003C\u002Fli>\n\u003Cli>Select \u003Cstrong>\"Super Table\"\u003C\u002Fstrong> as the layout\u003C\u002Fli>\n\u003Cli>Configure the layout options in the \u003Cstrong>Layout Options\u003C\u002Fstrong> sidebar panel\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>Usage Guide\u003C\u002Fh2>\n\u003Ch3>Quick Filters\u003C\u002Fh3>\n\u003Cp>Quick Filters provide fast access to frequently used filter combinations:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Creating a Filter\u003C\u002Fstrong>: Click the \"+\" button in the Quick Filters section\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Configure Filter\u003C\u002Fstrong>: Set field, operator, and value\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Save Filter\u003C\u002Fstrong>: Give it a name and optional color\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Using Filters\u003C\u002Fstrong>: Click filter buttons to toggle them on\u002Foff\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Filter States\u003C\u002Fstrong>:\n\u003Cul>\n\u003Cli>Gray (OFF) - Filter not applied\u003C\u002Fli>\n\u003Cli>Blue (Active) - Filter applied with visual indicators\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Inline Editing\u003C\u002Fh3>\n\u003Cp>Edit data directly in the table without opening a separate form:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Entering Edit Mode\u003C\u002Fstrong>: Enable \"Edit Mode\" in the \u003Cstrong>Layout Options\u003C\u002Fstrong> sidebar (or the edit toggle in the table header), then click an editable cell\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Editor Types\u003C\u002Fstrong>:\n\u003Cul>\n\u003Cli>Text fields: Simple input or WYSIWYG editor\u003C\u002Fli>\n\u003Cli>Boolean: Checkbox toggle\u003C\u002Fli>\n\u003Cli>Select: Dropdown menu\u003C\u002Fli>\n\u003Cli>Date\u002FTime: Full date picker with calendar\u003C\u002Fli>\n\u003Cli>Color: Color picker with alignment support\u003C\u002Fli>\n\u003Cli>Image\u002FFile: File browser with larger previews\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Unified Header Actions\u003C\u002Fstrong>:\n\u003Cul>\n\u003Cli>Save\u002FCancel buttons in the popover header for all field types\u003C\u002Fli>\n\u003Cli>Consistent UI across all editors\u003C\u002Fli>\n\u003Cli>Icon-only buttons matching native Directus style\u003C\u002Fli>\n\u003C\u002Ful>\n\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Saving\u003C\u002Fstrong>: Click save button (✓) or press Enter\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Canceling\u003C\u002Fstrong>: Click cancel button (✗) or press Escape\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Cblockquote>\n\u003Cp>\u003Cstrong>Note:\u003C\u002Fstrong> Relational fields (M2O, O2M, M2M, M2A) are display-only and are not\neditable inline — open the item detail view to edit them.\u003C\u002Fp>\n\u003C\u002Fblockquote>\n\u003Ch3>Column Management\u003C\u002Fh3>\n\u003Cp>Customize which columns are displayed and how:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Add Columns\u003C\u002Fstrong>: Click \"+\" button in the table header\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Remove Columns\u003C\u002Fstrong>: Use column selector to hide columns\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Rename Columns\u003C\u002Fstrong>: Right-click header and select \"Rename\"\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Reorder Columns\u003C\u002Fstrong>: Drag column headers to reorder\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Resize Columns\u003C\u002Fstrong>: Drag column borders to resize\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Column Displays\u003C\u002Fh3>\n\u003Cp>Override how a column renders by attaching a display template, configured in the\nsidebar under \u003Cstrong>Layout Options → Column Displays\u003C\u002Fstrong>:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Add a display\u003C\u002Fstrong>: Click \"Add Column Display\", pick a column, and enter a template\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Edit \u002F Remove\u003C\u002Fstrong>: Click an existing entry to edit it, or the ✗ icon to remove it\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Templates\u003C\u002Fstrong> use the \u003Ccode>{{ field }}\u003C\u002Fcode> mustache syntax and may reference related fields\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch4>Many-to-Any (M2A) templates\u003C\u002Fh4>\n\u003Cp>M2A fields are polymorphic — each junction row points at one of several target\ncollections. Build the template straight from the \u003Cstrong>native field picker\u003C\u002Fstrong> (it now\nresolves correctly), or write tokens by hand. Tokens resolve per junction row; on a\nname clash the most specific (deepest) match wins:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>{{item:<collection>.<field>}}\u003C\u002Fcode> — a field on a specific target collection;\nnested paths work, e.g. \u003Ccode>{{item:partners_catalog.catalog_id.title}}\u003C\u002Fcode> (M2A → M2O → value)\u003C\u002Fli>\n\u003Cli>\u003Ccode>{{collection}}\u003C\u002Fcode> — the name of the row's target collection (the discriminator)\u003C\u002Fli>\n\u003Cli>The field-key-prefixed forms the picker emits also work, e.g.\n\u003Ccode>{{treatment.collection}}\u003C\u002Fcode>, \u003Ccode>{{treatment.item:service.name}}\u003C\u002Fcode>, or a junction\ncolumn like \u003Ccode>{{treatment.sort}}\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>\u003Ccode>{{<parentField>}}\u003C\u002Fcode> — a bare token reads a field on the parent row, e.g.\n\u003Ccode>{{code}}\u003C\u002Fcode> shows the order's own code next to each item\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Deep paths through the target work too\u003C\u002Fstrong>, including a \u003Ccode>translations\u003C\u002Fcode>\nrelation stored inside the target: \u003Ccode>{{item:service.translations.label}}\u003C\u002Fcode>.\nAdd a \u003Ccode>:lang\u003C\u002Fcode> suffix to choose the language (\u003Ccode>…translations.label:de-DE\u003C\u002Fcode>);\nwithout it the current user's language is used. The \u003Ccode>:lang\u003C\u002Fcode> suffix is\nhonored on M2A \u003Ccode>item:\u003C\u002Fcode> tokens only; on other relational columns it is not\ninterpreted (and an invalid path is dropped rather than sent to the API).\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>Each junction row only resolves the item token whose \u003Ccode><collection>\u003C\u002Fcode> matches its own\ntarget, so a template can cover every allowed collection at once:\u003C\u002Fp>\n\u003Cpre>\u003Ccode>{{collection}}: {{item:partners_catalog.name}} {{item:service.name}}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>The editor shows the allowed collections and an example for the selected field.\u003C\u002Fp>\n\u003Ch3>Bookmarks\u003C\u002Fh3>\n\u003Cp>Save table configurations for quick access:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Save Bookmark\u003C\u002Fstrong>: Configure table, then click bookmark icon → \"Save Current\"\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Load Bookmark\u003C\u002Fstrong>: Select from bookmark dropdown\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Update Bookmark\u003C\u002Fstrong>: Load bookmark, make changes, save with same name\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Delete Bookmark\u003C\u002Fstrong>: Right-click bookmark and select delete\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Shared Views (Save & Share)\u003C\u002Fh3>\n\u003Cp>Save the current view and choose who can see it:\u003C\u002Fp>\n\u003Col>\n\u003Cli>\u003Cstrong>Save view\u003C\u002Fstrong>: Click the \u003Cstrong>Save view\u003C\u002Fstrong> button in the header → name it, optionally pick an icon\u002Fcolor, and choose a scope.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Scopes\u003C\u002Fstrong>: \u003Cstrong>Just me\u003C\u002Fstrong> (personal), \u003Cstrong>Everyone\u003C\u002Fstrong> (global), or \u003Cstrong>Specific targets\u003C\u002Fstrong> (admins only) — select any number of \u003Cstrong>roles\u003C\u002Fstrong> and\u002For \u003Cstrong>users\u003C\u002Fstrong> to share with.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Re-saving\u003C\u002Fstrong> the same name updates the shared view in place (no duplicates).\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Visibility\u003C\u002Fstrong>: each recipient sees the shared view once in their own bookmark navigation. Non-admins only ever see the \"Just me\" option.\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch2>Project Structure\u003C\u002Fh2>\n\u003Cpre>\u003Ccode>super-layout-table\u002F\n├── index.ts                          # Extension entry point (defineLayout)\n├── src\u002F\n│   ├── super-table.vue               # Main layout component\n│   ├── options.vue                   # Sidebar layout options\n│   ├── actions.vue                   # Row\u002Fbulk actions component\n│   ├── components\u002F\n│   │   ├── InlineEditPopover.vue     # Inline editor popover\n│   │   ├── QuickFilters.vue          # Quick filter management\n│   │   ├── ColumnDisplaysSection.vue # Column-display list + editor\n│   │   ├── ColumnDisplayEditor.vue   # Single column-display form\n│   │   ├── EditableCellRelational.vue# Relational\u002FM2A cell rendering\n│   │   └── CellRenderers\u002F            # Custom cell renderers (image, select, …)\n│   ├── composables\u002F\n│   │   ├── api.ts                    # API operations (useTableApi)\n│   │   ├── useAliasFields.ts         # Field aliasing logic\n│   │   ├── useColumnDisplays.ts      # Column-display override CRUD\n│   │   └── …                         # pagination, sort, permissions, translations\n│   └── utils\u002F\n│       ├── adjustFieldsForDisplays.ts# Display field expansion (incl. M2A)\n│       ├── displayHeuristics.ts      # Template tokenising + relation helpers\n│       ├── resolveM2ARelation.ts     # M2A junction-shape resolver\n│       └── getDefaultDisplayForType.ts# Default display mapping\n├── tests\u002F                            # Vitest unit tests\n├── package.json                      # Package configuration\n├── tsconfig.json                     # TypeScript configuration\n└── README.md                         # This file\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>Development\u003C\u002Fh2>\n\u003Ch3>Prerequisites\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Node.js 20+ (CI runs on 20.x and 22.x)\u003C\u002Fli>\n\u003Cli>pnpm package manager\u003C\u002Fli>\n\u003Cli>Directus 11 and 12 (verified on 11.11.0 and 12.0.2)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Setup Development Environment\u003C\u002Fh3>\n\u003Cpre>\u003Ccode class=\"language-bash\"># Install dependencies\npnpm install\n\n# Start development build with watch mode\npnpm dev\n\n# Build for production\npnpm build\n\n# Run linter\npnpm lint\n\n# Type checking\npnpm type-check\n\n# Run all quality checks\npnpm quality\n\n# Fix linting issues\npnpm lint:fix\n\n# Format code\npnpm format\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>🚀 GitHub Actions & CI\u002FCD\u003C\u002Fh2>\n\u003Cp>This extension includes comprehensive GitHub Actions workflows for maintaining code quality:\u003C\u002Fp>\n\u003Ch3>Automated Quality Checks\u003C\u002Fh3>\n\u003Cp>Every push and pull request triggers automated quality validation:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>TypeScript Type Checking\u003C\u002Fstrong> - Ensures type safety across the codebase\u003C\u002Fli>\n\u003Cli>\u003Cstrong>ESLint\u003C\u002Fstrong> - Enforces code quality standards (0 errors, 0 warnings)\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prettier\u003C\u002Fstrong> - Validates consistent code formatting\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Build Validation\u003C\u002Fstrong> - Confirms the extension builds successfully\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Workflow Files\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>.github\u002Fworkflows\u002F\n├── ci.yml              # CI\u002FCD pipeline (build, test, quality on Node 20.x & 22.x)\n├── quality-checks.yml  # Type-check, lint, format, build (push\u002FPR)\n├── test.yml            # Vitest unit tests\n├── pr-checks.yml       # PR-specific checks with auto-comments\n├── release.yml         # Automated release creation on version tags\n└── badges.yml          # Status badge updates\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Running Locally\u003C\u002Fh3>\n\u003Cp>You can run the same checks locally before pushing:\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-bash\"># Run all quality checks at once\npnpm run quality\n\n# Individual checks\npnpm run type-check    # TypeScript validation\npnpm run lint          # ESLint checks\npnpm run format:check  # Prettier validation\npnpm run build         # Build test\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Pull Request Workflow\u003C\u002Fh3>\n\u003Col>\n\u003Cli>Create your feature branch\u003C\u002Fli>\n\u003Cli>Make your changes\u003C\u002Fli>\n\u003Cli>Run \u003Ccode>pnpm run quality\u003C\u002Fcode> locally\u003C\u002Fli>\n\u003Cli>Push to GitHub\u003C\u002Fli>\n\u003Cli>GitHub Actions will automatically validate your code\u003C\u002Fli>\n\u003Cli>PR will receive an automated quality report comment\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Layout Options\u003C\u002Fh3>\n\u003Cp>The layout persists these options (those marked \u003Cem>(sidebar)\u003C\u002Fem> have a control in the\n\u003Cstrong>Layout Options\u003C\u002Fstrong> panel; the rest are set through table interactions):\u003C\u002Fp>\n\u003Cpre>\u003Ccode class=\"language-typescript\">{\n  showToolbar?: boolean;          \u002F\u002F (sidebar) show the toolbar with actions\n  editMode?: boolean;             \u002F\u002F (sidebar) enable inline editing\n  directBooleanToggle?: boolean;  \u002F\u002F (sidebar, requires editMode) single-click boolean toggle\n  languageCodeField?: string;     \u002F\u002F (sidebar) language-code field for translations (default 'languages_code')\n  customFieldNames?: Record<string, string>;                 \u002F\u002F per-column header label overrides\n  columnDisplays?: Record<string, { template: string; display?: string }>; \u002F\u002F per-column display templates\n  showSelect?: boolean;           \u002F\u002F show row-selection checkboxes\n  spacing?: 'compact' | 'cozy' | 'comfortable';              \u002F\u002F row height\n  align?: Record<string, 'left' | 'center' | 'right'>;       \u002F\u002F per-column text alignment\n  widths?: Record<string, number>;                           \u002F\u002F per-column widths\n  quickFilters?: QuickFilter[];   \u002F\u002F saved quick filters\n}\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch2>API Reference\u003C\u002Fh2>\n\u003Ch3>Events\u003C\u002Fh3>\n\u003Cp>As a Directus layout, the component emits the standard layout sync events:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>update:selection\u003C\u002Fcode> - When item selection changes\u003C\u002Fli>\n\u003Cli>\u003Ccode>update:layoutOptions\u003C\u002Fcode> - When a layout option changes (column displays, edit mode, alignment, widths, …)\u003C\u002Fli>\n\u003Cli>\u003Ccode>update:layoutQuery\u003C\u002Fcode> - When the query changes (fields, sort, page, limit)\u003C\u002Fli>\n\u003Cli>\u003Ccode>update:search\u003C\u002Fcode> - When the search query changes\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>The \u003Ccode>filter\u003C\u002Fcode> prop is consumed read-only (filtering is driven by Directus), so no\n\u003Ccode>update:filter\u003C\u002Fcode> event is emitted.\u003C\u002Fp>\n\u003Ch3>Composables\u003C\u002Fh3>\n\u003Cp>Available composables for extension development:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Ccode>useTableApi()\u003C\u002Fcode> - API operations wrapper (fetch, count, update, delete, export)\u003C\u002Fli>\n\u003Cli>\u003Ccode>useAliasFields()\u003C\u002Fcode> - Field aliasing for complex queries\u003C\u002Fli>\n\u003Cli>\u003Ccode>useColumnDisplays()\u003C\u002Fcode> - Per-column display-template overrides\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Browser Support\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Chrome 90+\u003C\u002Fli>\n\u003Cli>Firefox 88+\u003C\u002Fli>\n\u003Cli>Safari 14+\u003C\u002Fli>\n\u003Cli>Edge 90+\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Contributing\u003C\u002Fh2>\n\u003Cp>Contributions are welcome! Please follow these guidelines:\u003C\u002Fp>\n\u003Col>\n\u003Cli>Fork the repository\u003C\u002Fli>\n\u003Cli>Create a feature branch\u003C\u002Fli>\n\u003Cli>Make your changes\u003C\u002Fli>\n\u003Cli>Add\u002Fupdate tests as needed\u003C\u002Fli>\n\u003Cli>Submit a pull request\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>Code Style\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Use TypeScript with explicit types\u003C\u002Fli>\n\u003Cli>Follow Vue 3 Composition API patterns\u003C\u002Fli>\n\u003Cli>Maintain consistent code formatting\u003C\u002Fli>\n\u003Cli>Add JSDoc comments for public APIs\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Troubleshooting\u003C\u002Fh2>\n\u003Ch3>Extension not loading\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Ensure the extension is in the correct directory\u003C\u002Fli>\n\u003Cli>Check Directus logs for errors\u003C\u002Fli>\n\u003Cli>Verify all dependencies are installed\u003C\u002Fli>\n\u003Cli>Try clearing browser cache\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Inline editing not working\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Make sure \"Edit Mode\" is enabled in the Layout Options sidebar\u003C\u002Fli>\n\u003Cli>Check field permissions in Directus (no update permission = read-only)\u003C\u002Fli>\n\u003Cli>Ensure fields are not configured as read-only\u003C\u002Fli>\n\u003Cli>Note: relational fields (M2O, O2M, M2M, M2A) are display-only by design\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>Performance issues\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Choose a smaller page size (the per-page selector defaults to 25)\u003C\u002Fli>\n\u003Cli>Check the browser console for errors\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2>Changelog\u003C\u002Fh2>\n\u003Cp>See \u003Ca href=\".\u002FCHANGELOG.md\">CHANGELOG.md\u003C\u002Fa> for a detailed version history.\u003C\u002Fp>\n\u003Ch2>License\u003C\u002Fh2>\n\u003Cp>MIT License - See LICENSE file for details\u003C\u002Fp>\n\u003Ch2>Support\u003C\u002Fh2>\n\u003Cp>For issues, questions, or feature requests, please create an issue in the repository.\u003C\u002Fp>\n\u003Ch2>Credits\u003C\u002Fh2>\n\u003Cp>Built for Directus 11+ by the community.\nSpecial thanks to all contributors and testers.\u003C\u002Fp>","https:\u002F\u002Fraw.githubusercontent.com\u002FsmartlabsAT\u002Fdirectus-super-table\u002Fmain\u002Fdemo\u002Fsuper-table-demo.gif",[303]]