{"id":16993662,"url":"https://github.com/kayoshi-dev/vue-drawble","last_synced_at":"2025-06-30T22:35:58.318Z","repository":{"id":65539164,"uuid":"531041145","full_name":"Kayoshi-dev/Vue-Drawble","owner":"Kayoshi-dev","description":"Vue Drawble is a simple and lightweight Vue Component aiming to help you render your data in a table in a dead simple way.","archived":false,"fork":false,"pushed_at":"2022-09-02T08:40:47.000Z","size":15,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T21:35:58.075Z","etag":null,"topics":["component","table","vue","vue3"],"latest_commit_sha":null,"homepage":"","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Kayoshi-dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-08-31T10:49:01.000Z","updated_at":"2022-11-12T07:13:38.000Z","dependencies_parsed_at":"2023-01-28T05:25:10.972Z","dependency_job_id":null,"html_url":"https://github.com/Kayoshi-dev/Vue-Drawble","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kayoshi-dev%2FVue-Drawble","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kayoshi-dev%2FVue-Drawble/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kayoshi-dev%2FVue-Drawble/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Kayoshi-dev%2FVue-Drawble/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Kayoshi-dev","download_url":"https://codeload.github.com/Kayoshi-dev/Vue-Drawble/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248519473,"owners_count":21117757,"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":["component","table","vue","vue3"],"created_at":"2024-10-14T03:43:41.859Z","updated_at":"2025-04-12T04:51:06.461Z","avatar_url":"https://github.com/Kayoshi-dev.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n\u003cp align=\"center\"\u003e\n    \u003cimg width=\"180\" src=\"https://i.ibb.co/9HLzCP5/default.png\" alt=\"Vue Drawble logo\"\u003e\n\u003c/p\u003e\n\nVue Drawble is a simple and lightweight Vue Component aiming to help you render your data in a table in a dead simple way.\n\n(Yes the logo has been generated with NameCheap lol)\n\n## Features\n\n- Renders a table\n- Customize the column template\n- Choose which data you want to display\n\n### Upcoming (by priority)\n\n- Filter\n- Search\n- Collapsable panel\n- Typescript\n- Easily style with your preferred framework\n- Improve code\n\n\n## Documentation\n\nExamples are available in the src/App.vue file. (More to come)\n\nTo get started with Vue Drawble, first install the package with your favorite package manager :\n\n```bash\nnpm i vue-drawble\n```\n\nThen you can import the VueDrawble component\n```js\nimport { VueDrawble } from 'vue-drawble';\n```\n\nTo use this component, simply add it to your template like this\n```js\n\u003cVueDrawble /\u003e\n```\n\nThis component requires two props to work : Columns, and Rows.\n\nHere's the list of props you can pass to VueDrawble :\n- Columns : An array or an object -\u003e It correspond to the title of your table columns and should match one of your key from your rows.\n- Rows : An array of object -\u003e A JSON\n- firstLetterUppercase -\u003e Boolean : Will automatically convert your Columns and display them with an uppercase first letter.\n\nExample : \n\n```js\nconst rows = ref([\n    {\n        id: '1',\n        name: 'My first command',\n        description: 'I print Hello World on the Terminal',\n        'command cli': `echo 'Hello World'`\n    },\n    {\n        id: '2',\n        name: 'My second command',\n        description: 'I print Bonjour on the Terminal',\n        'command cli': `echo 'Bonjour'`\n    },\n]);\n\n\u003cVueDrawble :rows=\"rows\" :columns=\"['id', 'command cli', 'description']\" /\u003e\n```\n\n#### Render :\n\n| id | command cli        | description                         |\n|----|--------------------|-------------------------------------|\n| 1  | echo 'Hello World' | I print Hello World on the Terminal |\n| 2  | echo 'Bonjour'     | I print Bonjour on the Terminal     |\n\nHere you can see that the name column is missing, because I didn't provided it in the columns array.\n\nBy using the columns props with an array, Vue Drawble assume that the key in your rows is correct and you don't want to rename it, but that's not always true, this is why you can also provide an Object to the prop columns :\n```js\n\u003cVueDrawble :rows=\"rows\" :columns=\"{id: 'ID', name: 'Name', 'command cli': 'Command to execute'}\"\u003e\n```\n\nWhen you provide an object, the key will be used to match with the rows, while the value will be displayed in the table header :\n\n#### Render :\n\n| ID | Name              | Command to execute |\n|----|-------------------|--------------------|\n| 1  | My first command  | echo 'Hello World' |\n| 2  | My second command | echo 'Bonjour'     |\n\n### Custom template\n\nSometimes rendering a table is not enough and you'd like to add link or some css to some columns.\n\nTo do that, you can use the template VueDrawble is dynamically creating with your data.\nFor example, let's say we would like to add an anchor on our column name, we would do it like that :\n\n```js\n\u003cVueDrawble :rows=\"rows\" :columns=\"{id: 'ID', name: 'Name', 'command cli': 'Command to execute'}\"\u003e\n    \u003ctemplate #name=\"{ name }\"\u003e\u003ca href=\"#\"\u003e{{ name }}\u003c/a\u003e\u003c/template\u003e\n\u003c/VueDrawble\u003e\n```\n\nThe slot name you must provide is the key of your rows and it allows you to do an object destructuration to get all the data you need from your row.\n\nIt can be a problem if your key is a composed of two word, for example : 'command cli', this is why VueDrawble internally convert those keys to camelCase.\n\nSo let's say you want to update the template for the column 'command cli', you would write your template like that\n\n```js\n\u003ctemplate #commandCli=\"{ 'command cli': commandCli  }\"\u003e\u003cspan style=\"color: red;\"\u003e{{ commandCli }}\u003c/span\u003e\u003c/template\u003e\n```\n\nHere we are simply extracting the 'command cli' variable and renaming it 'commandCli' and using it in our template.\n\nYou could also get the id or the name like that :\n\n```js\n\u003ctemplate #commandCli=\"{ id, name, 'command cli': commandCli  }\"\u003e\u003cspan style=\"color: red;\"\u003e {{ id }} {{ name }}\u003c/span\u003e{{ commandCli }}\u003c/template\u003e\n```\n\n## Authors\n\n- [@Kayoshi-dev](https://github.com/Kayoshi-dev)\n\n\n## Contributing\n\nContributions are always welcome!\n\nBefore contributing please make an issues and check if someone is already working on the functionnality you want to implement! (Or the bug you want to fix :p)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkayoshi-dev%2Fvue-drawble","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fkayoshi-dev%2Fvue-drawble","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fkayoshi-dev%2Fvue-drawble/lists"}