{"id":14990248,"url":"https://github.com/ayeressian/db-viewer-component","last_synced_at":"2025-04-12T02:10:20.434Z","repository":{"id":33962358,"uuid":"137412763","full_name":"ayeressian/db-viewer-component","owner":"ayeressian","description":"Database viewer web component","archived":false,"fork":false,"pushed_at":"2023-01-06T17:15:49.000Z","size":1891,"stargazers_count":12,"open_issues_count":16,"forks_count":7,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-25T21:47:40.765Z","etag":null,"topics":["database-viewer","db-schema-viewer","db-viewer","sql-schema","sql-viewer","webcomponent"],"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/ayeressian.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-06-14T21:48:23.000Z","updated_at":"2025-02-15T18:23:03.000Z","dependencies_parsed_at":"2023-01-15T03:45:43.835Z","dependency_job_id":null,"html_url":"https://github.com/ayeressian/db-viewer-component","commit_stats":null,"previous_names":[],"tags_count":28,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayeressian%2Fdb-viewer-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayeressian%2Fdb-viewer-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayeressian%2Fdb-viewer-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ayeressian%2Fdb-viewer-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ayeressian","download_url":"https://codeload.github.com/ayeressian/db-viewer-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248054201,"owners_count":21039952,"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":["database-viewer","db-schema-viewer","db-viewer","sql-schema","sql-viewer","webcomponent"],"created_at":"2024-09-24T14:19:46.591Z","updated_at":"2025-04-12T02:10:20.410Z","avatar_url":"https://github.com/ayeressian.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"![NPM](https://img.shields.io/npm/l/db-viewer-component.svg)\n![npm](https://img.shields.io/npm/v/db-viewer-component.svg)\n![CI](https://github.com/ayeressian/db-viewer-component/workflows/CI/badge.svg)\n\n# db-viewer-component\n\nDatabase schema viewer web component. This web component can be used to view interactive database diagrams.\nSee an [example](https://stackblitz.com/edit/db-viewer-component-simple-example).\n\nNote: This component doesn't work on old browsers that don't support web components.\n\n### Usage\nIn the case of webpack, import the package in your main js file.\n```javascript\nimport 'db-viewer-component';\n```\nin html:\n```html\n\u003cdb-viewer src=\"/awesome-schema.json\"\u003e\u003c/db-viewer\u003e\n```\nThe schema for viewer can be specified either with src attribute as shown above or by schema property of db-viwer html object like this:\n\n```javascript\ndocument.querySelector('db-viewer').schema = awesomeSchema;\n```\nThe json schema for db-veiwer schema can be found [here](https://raw.githubusercontent.com/ayeressian/db-viewer-component/v4.4.7/src/validation-schema.json). An example of schema can be found [here](https://raw.githubusercontent.com/ayeressian/db-viewer-component/v4.4.7/example/schema/school.json).\n\nA simple usage example can be found [here](https://stackblitz.com/edit/db-viewer-component-simple-example).\nAn example usage with the React can be found [here](https://stackblitz.com/edit/db-viewer-component-react-example). An example usage with the Svelte can be found [here](https://codesandbox.io/s/white-fast-uvdk2).\n\n### API\n#### Attributes\nName | Description\n--- | ---\n`src` | Viewer-schema url. It should follow [this](https://raw.githubusercontent.com/ayeressian/db-viewer-component/v4.4.7/src/validation-schema.json) json schema. An example of schema can be found [here](https://raw.githubusercontent.com/ayeressian/db-viewer-component/v4.4.7/example/schema/school.json).\n`disable-table-movement` | If this attribute exist. Table movement will be disabled.\n`viewport` | Viewport positioning strategy on initial load. Can be \"noChange\", \"centerByTablesWeight\", \"center\" or \"centerByTables\".\n#### Events\nName | Description | event.detail\n--- | --- | ---\n`tableClick` | Clicking on a table. | {tableName, pos: {x, y}, width, height}\n`tableDblClick` | Double clicking on a table. | {tableName, pos: {x, y}, width, height}\n`tableContextMenu` | Right clicking on a table. | {tableName, pos: {x, y}, width, height}\n`tableMove` | Moving table. | {tableName, pos: {x, y}, width, height}\n`tableMoveEnd` | Moving table ends. | {tableName, pos: {x, y}, width, height}\n`relationClick` | Clicking on a relation. | {fromTable, toTable, fromColumn, toColumn}\n`relationDblClick` | Double clicking in a relation. | {fromTable, toTable, fromColumn, toColumn}\n`relationContextMenu` | Right clikc on a realtion. | {fromTable, toTable, fromColumn, toColumn}\n`zoomIn` | Zooming in view |\n`zoomOut` | Zooming out view |\n`load` | Schema file has been successfully fetched from server. |\n`ready` | Db viewer component has been loaded. |\n`viewportClick` | Clicking on the viewport. | {x, y}\n#### Properties\nName | Description\n--- | ---\n`schema` | Get and set schema for viewer. This will override the html src attribute. Note: src attribute accepts the address of viewer-schema and schema property accepts javascript object as viewer-schema. The viwer-schema should follow [this](https://raw.githubusercontent.com/ayeressian/db-viewer-component/v4.4.7/src/validation-schema.json) json schema. Note the only way that db-viewer can alter the schema is by adding position of tables.\n`src` | Set viewer-schema url. It should follow [this](https://raw.githubusercontent.com/ayeressian/db-viewer-component/v4.4.7/src/validation-schema.json) json schema. An example of schema can be found [here](https://raw.githubusercontent.com/ayeressian/db-viewer-component/v4.4.7/example/schema/school.json). It has the same effect as the src attribute.\n`scrollLeft` | Get and set scrolling position from left.\n`scrollTop` | Get and set scrolling position from top.\n`disableTableMovement` | Disables table movement if true.\n`viewport` | Viewport positioning strategy on initial load. Can be \"noChange\", \"centerByTablesWeight\", \"center\" or \"centerByTables\".\n#### Methods\nName | Description | Arguments\n--- | --- | ---\n`getTablePos` | Get position of table. | table name\n`setTablePos` | Set position of table. | table name, x cord, y cord\n`zoomIn` | Zoom in view. |\n`zoomOut` | Zoom out view. |\n`getZoom` | Get amount of zoom |\n#### Styles\nStyles can be applied by the following CSS variables.\nName | Description\n--- | ---\n`--table-boarder-color` | Table border color\n`--viewer-background-color` | Viewer background color\n`--relation-color` | Relation color |\n`--relation-color-highlight` | Relation color on mouse hover\n`--font-family` | Font\n`--color` | Text color\n\n### To run\n  1. yarn\n  2. yarn start\n  3. Navigate to http://localhost:9998\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayeressian%2Fdb-viewer-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fayeressian%2Fdb-viewer-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fayeressian%2Fdb-viewer-component/lists"}