{"id":20283792,"url":"https://github.com/premieroctet/directus-extension-sql-panel","last_synced_at":"2025-04-11T08:23:18.464Z","repository":{"id":204738347,"uuid":"707753480","full_name":"premieroctet/directus-extension-sql-panel","owner":"premieroctet","description":"This is a custom interface for Directus that allows you to display result of your SQL queries in a table","archived":false,"fork":false,"pushed_at":"2024-05-15T19:13:11.000Z","size":6841,"stargazers_count":24,"open_issues_count":3,"forks_count":1,"subscribers_count":9,"default_branch":"main","last_synced_at":"2025-04-09T18:04:53.210Z","etag":null,"topics":["directus","directus-extension","directus-extension-interface"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/premieroctet.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2023-10-20T15:23:32.000Z","updated_at":"2025-04-07T02:52:07.000Z","dependencies_parsed_at":null,"dependency_job_id":"7c5ee384-23f6-4941-ba50-a280cfddc5b5","html_url":"https://github.com/premieroctet/directus-extension-sql-panel","commit_stats":null,"previous_names":["premieroctet/directus-extension-sql-panel"],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fdirectus-extension-sql-panel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fdirectus-extension-sql-panel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fdirectus-extension-sql-panel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/premieroctet%2Fdirectus-extension-sql-panel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/premieroctet","download_url":"https://codeload.github.com/premieroctet/directus-extension-sql-panel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248361037,"owners_count":21090803,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["directus","directus-extension","directus-extension-interface"],"created_at":"2024-11-14T14:17:11.079Z","updated_at":"2025-04-11T08:23:18.412Z","avatar_url":"https://github.com/premieroctet.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# SQL Panel - Directus extension\n\nThis is a custom interface for [Directus](https://directus.io/) that allows you to display result of your SQL queries in a table.\n\n## Installation\n\n```bash\nnpm install @premieroctet/directus-extension-sql-panel\n```\n\nor using yarn :\n\n```bash\nyarn add @premieroctet/directus-extension-sql-panel\n```\n\nYou should be set to go, [Directus will automatically detect the extension](https://docs.directus.io/guides/extensions/operations-npm-package.html#add-operation-to-directus).\n\n## Usage\n\nHow to use the extension in your Directus project ?\n\n- Add a new **SQL Panel** field to a data model (or edit an existing one)\n- Fill out the field settings with your SQL query and some other options (see below)\n- Save the field settings\n- Enjoy ! 🎉\n\n## 🧪 Example of usage\n\nLet's say you're building a back-office to manage movies / actors and credits.\nYou might want to display a list cast and crew of a movie in the movie's detail page.\n\n![Example of usage](https://github.com/premieroctet/directus-extension-sql-panel/blob/main/docs/example.png)\n\nTo do so, you can create a new **SQL Panel** field in the `movies` data model, and fill out the settings with the following SQL query:\n\n```sql\nSELECT\npersons.id,\npersons.name,\nrole\nFROM credits\nLEFT JOIN persons ON person = persons.id\nWHERE movie = $entityId;\n```\n\nHere we're using the `$entityId` variable to get the current movie's id. It's part of our API and is automatically replaced by the current entity's id.\n\nWe'll now fill out the columns settings. For each column, you can specify:\n\n- The column's name\n- The column's type ([text](#column-types), [date](#column-types), [date time](#column-types), [ressource id](#column-types), [list of options](#column-types))\n- The column's width (in pixels) (optional)\n- If it's sortable (optional)\n\n![Example of settings top](https://github.com/premieroctet/directus-extension-sql-panel/blob/main/docs/example-settings-1.png)\n![Example of settings bottom](https://github.com/premieroctet/directus-extension-sql-panel/blob/main/docs/example-settings-2.png)\n\nWe save the field settings and we're done ! 🎉\n\n## 📚 Documentation\n\n### Column types\n\nWe currently support the following column types:\n\n##### Text\n\nA simple text field, value is displayed as is.\n\n##### Date\n\nA date field, value is displayed as a date (format: `YYYY-MM-DD`).\n\n##### Date time\n\nA date time field, value is displayed as a date time (format: `YYYY-MM-DD at HH:mm PM/AM`).\n\n##### Ressource ID\n\nA ressource ID field, value is displayed as a link to the ressource's detail page. When the user clicks on the row, it will be redirected to the ressource's detail page.\nYou need to specify the ressource's name in the `ressource` field settings.\nWe recommend set the width of this column to `0` so it's not displayed and the row is still clickable.\n\n**⚠️ You can only use this type once per query as it will make the entiere row clickable.**\n\n##### List of options\n\n![List of options settings](https://github.com/premieroctet/directus-extension-sql-panel/blob/main/docs/list-settings.png)\n\nA list of options to be displayed according to the value.\nYou need to specify the list of options in the `list of options` field settings.\nFor each option, you need to specify:\n\n- The option's value\n- The option's label\n  and optionally:\n- The option's color (hexadecimal value)\n\n![Option settings](https://github.com/premieroctet/directus-extension-sql-panel/blob/main/docs/option-settings.png)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpremieroctet%2Fdirectus-extension-sql-panel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpremieroctet%2Fdirectus-extension-sql-panel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpremieroctet%2Fdirectus-extension-sql-panel/lists"}