{"id":20525788,"url":"https://github.com/barbosa89/vue-table","last_synced_at":"2026-04-11T07:04:52.036Z","repository":{"id":110749291,"uuid":"285937888","full_name":"barbosa89/vue-table","owner":"barbosa89","description":"A classical data table component in VueJS and Bootstrap 4, optimized for Laravel applications.","archived":false,"fork":false,"pushed_at":"2021-04-27T12:17:31.000Z","size":271,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-02-24T15:07:15.835Z","etag":null,"topics":["bootstrap4","data","datatable","javascript","laravel","php","table","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Vue","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/barbosa89.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-08-07T23:25:32.000Z","updated_at":"2021-04-27T12:16:26.000Z","dependencies_parsed_at":"2023-06-01T16:15:11.223Z","dependency_job_id":null,"html_url":"https://github.com/barbosa89/vue-table","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"purl":"pkg:github/barbosa89/vue-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barbosa89%2Fvue-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barbosa89%2Fvue-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barbosa89%2Fvue-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barbosa89%2Fvue-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/barbosa89","download_url":"https://codeload.github.com/barbosa89/vue-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/barbosa89%2Fvue-table/sbom","scorecard":{"id":225696,"data":{"date":"2025-08-11","repo":{"name":"github.com/barbosa89/vue-table","commit":"3a011bfa1b7eee50d73270e832f5c84675f16b85"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":1.7,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/29 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}},{"name":"SAST","score":0,"reason":"SAST tool is not run on all commits -- score normalized to 0","details":["Warn: 0 commits out of 2 are checked with a SAST tool"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Vulnerabilities","score":0,"reason":"45 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-67hx-6x53-jw92","Warn: Project is vulnerable to: GHSA-93q8-gq69-wqmw","Warn: Project is vulnerable to: GHSA-cph5-m8f7-6c5x","Warn: Project is vulnerable to: GHSA-wf5p-g6vw-rhxx","Warn: Project is vulnerable to: GHSA-jr5f-v2jv-69x6","Warn: Project is vulnerable to: GHSA-vc8w-jr9v-vj7f","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-grv7-fg5c-xmjg","Warn: Project is vulnerable to: GHSA-w8qv-6jwh-64r5","Warn: Project is vulnerable to: GHSA-257v-vj4p-3w2h","Warn: Project is vulnerable to: GHSA-gxpj-cx7g-858c","Warn: Project is vulnerable to: GHSA-w573-4hg7-7wgq","Warn: Project is vulnerable to: GHSA-74fj-2j2h-c42q","Warn: Project is vulnerable to: GHSA-pw2r-vq6v-hr8c","Warn: Project is vulnerable to: GHSA-jchw-25xp-jwwc","Warn: Project is vulnerable to: GHSA-cxjh-pqwp-8mfp","Warn: Project is vulnerable to: GHSA-fjxv-7rqg-78g4","Warn: Project is vulnerable to: GHSA-ww39-953v-wcq6","Warn: Project is vulnerable to: GHSA-7r28-3m3f-r2pr","Warn: Project is vulnerable to: GHSA-r8j5-h5cx-65gg","Warn: Project is vulnerable to: GHSA-896r-f27r-55mw","Warn: Project is vulnerable to: GHSA-9c47-m6qq-7p4h","Warn: Project is vulnerable to: GHSA-76p3-8jx3-jpfq","Warn: Project is vulnerable to: GHSA-3rfm-jhwj-7488","Warn: Project is vulnerable to: GHSA-hhq3-ff78-jv3g","Warn: Project is vulnerable to: GHSA-29mw-wpgm-hmr9","Warn: Project is vulnerable to: GHSA-35jh-r3h4-6jhm","Warn: Project is vulnerable to: GHSA-f8q6-p94x-37v3","Warn: Project is vulnerable to: GHSA-xvch-5gv4-984h","Warn: Project is vulnerable to: GHSA-rp65-9cf3-cjxr","Warn: Project is vulnerable to: GHSA-hj48-42vr-x3v9","Warn: Project is vulnerable to: GHSA-566m-qj78-rww5","Warn: Project is vulnerable to: GHSA-7fh5-64p2-3v2j","Warn: Project is vulnerable to: GHSA-hwj9-h5mp-3pm3","Warn: Project is vulnerable to: GHSA-p493-635q-r6gr","Warn: Project is vulnerable to: GHSA-3965-hpx2-q597","Warn: Project is vulnerable to: GHSA-hrpp-h998-j3pp","Warn: Project is vulnerable to: GHSA-p8p7-x288-28g6","Warn: Project is vulnerable to: GHSA-gcx4-mw62-g8wm","Warn: Project is vulnerable to: GHSA-c2qf-rxjj-qqgw","Warn: Project is vulnerable to: GHSA-4wf5-vphf-c2xc","Warn: Project is vulnerable to: GHSA-72xf-g2v4-qvf3","Warn: Project is vulnerable to: GHSA-5j4c-8p2g-v4jx","Warn: Project is vulnerable to: GHSA-g3ch-rx76-35fx"],"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}}]},"last_synced_at":"2025-08-17T03:45:59.332Z","repository_id":110749291,"created_at":"2025-08-17T03:45:59.332Z","updated_at":"2025-08-17T03:45:59.332Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31671630,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-10T17:19:37.612Z","status":"online","status_checked_at":"2026-04-11T02:00:05.776Z","response_time":54,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":["bootstrap4","data","datatable","javascript","laravel","php","table","vuejs"],"created_at":"2024-11-15T23:09:32.049Z","updated_at":"2026-04-11T07:04:52.005Z","avatar_url":"https://github.com/barbosa89.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue-table component\n\nVue-table is a data table component that allows the developer a high degree of customization, it takes care of complex tasks and gives the developer control over how the data is displayed. This component works with the **Laravel** framework pagination response.\n\n![Vue Table](https://raw.githubusercontent.com/barbosa89/vue-table/master/example/images/vue-table.png)\n\n## Features\n\n- Pagination\n- Go to specific page\n- Option for records by page\n- Search input\n- Multilingual support\n- Responsive\n\n## Installation\n\n```\nnpm i @barbosa89/vue-table\n```\n\n## Usage\n\nThe component styles are based on the CSS framework **Bootstrap 4**, so, Vue-table is structured in three rows (.row), so you must nest the component inside a Bootstrap container (.container/.container-fluid).\n\n### How it works\n\nVue-table does not display the data sent by the server directly, this passes each record to a slot, the developer uses the slot to determine the way the data is displayed.\n\n### Props\n\nThe component can be configured with four props:\n\n- **headers**: It is an array that contains objects with two properties, **description** and **sortable**, the **description** property is required and represents a table column header; the **sortable** is optional, it is used as a data sort column.\n\n```js\nheaders: [\n    {\n        description: 'Id',  # Name to display\n        sortable: 'id',        # Sortable column name in table\n    },\n    {\n        description: 'Email' # No sortable column\n    }\n]\n```\n\n- **url**: The endpoint from which Axios will request data.\n\n```\nhttps://myapp.com/endpoint\n```\n\n- **lang** (en/es): The language to use, by default is English, English and Spanish are supported.\n\n- **locales**: It is an object of translations.\n\n```js\nlocales: {\n    en:{\n        display: 'Records per page',\n        search: 'Search',\n        record: 'Record',\n        of: 'of',\n        total: 'Total'\n    },\n    es:{\n        display: 'Registros por página',\n        search: 'Buscar',\n        record: 'Registro',\n        of: 'de',\n        total: 'Total'\n    }\n}\n```\n\n- **params**: Object with additional parameters such as filters.\n```js\nparams: {\n    model: 'value',\n    reference: 'value'\n}\n```\n\n- **user-data**: Array|Object data from user. If the prop is an array, a list without controls is printed. If the prop is an object, the Laravel pagination variables are assigned:\n\n```js\n{\n   \"total\": 50,\n   \"per_page\": 15,\n   \"current_page\": 1,\n   \"last_page\": 4,\n   \"first_page_url\": \"http://laravel.app?page=1\",\n   \"last_page_url\": \"http://laravel.app?page=4\",\n   \"next_page_url\": \"http://laravel.app?page=2\",\n   \"prev_page_url\": null,\n   \"path\": \"http://laravel.app\",\n   \"from\": 1,\n   \"to\": 15,\n   \"data\":[\n        {\n            // Result Object\n        },\n        {\n            // Result Object\n        }\n   ]\n}\n```\n\nWhen a Laravel paging object is assigned, the parent component must listen for an event to update the URL.\n\n```html\n\u003cvue-table :url='myUrl' :user-data='paginationObject' @url-update='myUrl = $event'\u003e\u003c/vue-table\u003e\n```\n\nListen event using a method:\n\n```html\n\u003cvue-table :url='myUrl' :user-data='paginationObject' @url-update='updateUrl'\u003e\u003c/vue-table\u003e\n```\n\n- **data-key**: You can pass a custom data key to access the data received from the API service.\n\n```php\nreturn response()-\u003ejson([\n    'key' =\u003e $collection,\n]);\n```\n\nwhen you don't pass a custom data key, it means the API service send data as follows:\n\n```php\nreturn response()-\u003ejson($collection);\n```\n\n- **search-icon**: Now you can pass a custom search icon, example: **fas fa-search**.\n\n### Example\n\n```html\n\u003ctemplate\u003e\n    \u003cdiv class=\"container\"\u003e\n        \u003ch1 class=\"text-center my-4\"\u003eVue Table component\u003c/h1\u003e\n        \u003cvue-table :headers=\"headers\" :url=\"url\"\u003e\n            \u003ctemplate v-slot:record=\"{ record }\"\u003e\n                \u003ctd\u003e\n                    \u003ca href=\"#\"\u003e\n                        {{ record.id }}\n                    \u003c/a\u003e\n                \u003c/td\u003e\n                \u003ctd\u003e\n                    \u003ca href=\"#\"\u003e\n                        {{ record.first_name }}\n                    \u003c/a\u003e\n                \u003c/td\u003e\n                \u003ctd\u003e\n                    \u003ca href=\"#\"\u003e\n                        {{ record.last_name }}\n                    \u003c/a\u003e\n                \u003c/td\u003e\n                \u003ctd\u003e\n                    {{ record.email }}\n                \u003c/td\u003e\n            \u003c/template\u003e\n        \u003c/vue-table\u003e\n    \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript\u003e\n    import VueTable from 'VueTable'\n\n    export default {\n        data() {\n            return {\n                headers: [\n                    {\n                        description: 'Id',\n                        field: 'id', # Sortable column\n                    },\n                    {\n                        description: 'Name',\n                        field: 'name', # Sortable column\n                    },\n                    {\n                        description: 'Last',\n                        field: 'last', # Sortable column\n                    },\n                    {\n                        description: 'Email' # No sortable column\n                    },\n                ],\n                url: 'https://myserver.app/api/users?page=1',\n\n                // Optional, You will need to pass the props\n                lang: 'en',\n                locales: {\n                    en:{\n                        display: 'Records per page',\n                        search: 'Search',\n                        record: 'Record',\n                        of: 'of',\n                        total: 'Total'\n                    },\n                    es:{\n                        display: 'Registros por página',\n                        search: 'Buscar',\n                        record: 'Registro',\n                        of: 'de',\n                        total: 'Total'\n                    }\n                }\n            };\n        },\n        components: {\n            VueTable\n        }\n    }\n\u003c/script\u003e\n\n```\n### Internacionalization\n\nWith packages like **vue-i18n**, you can automate multiple languages:\n\n```js\nlang: document.documentElement.lang,\nlocales: {\n    en:{\n        display: $t('display'),\n        search: $t('search'),\n        record: $t('record'),\n        of: $t('of'),\n        total: $t('total')\n    },\n    es:{\n        display: $t('display'),\n        search: $t('search'),\n        record: $t('record'),\n        of: $t('of'),\n        total: $t('total')\n    }\n}\n\n```\n## Server side with Laravel\n\nVue-table sends Laravel a series of parameters namely:\n\n- page\n- per_page\n- search: The search param\n- ordered_desc/ordered_asc\n\nURL example:\n\n```\nmylaravel.app/endpoint?page=1\u0026per_page=15\u0026search_=text\u0026ordered_desc=column_name\n```\n\nIn an example of implementation in Laravel 7:\n\n```php\npublic function index()\n{\n    $posts = Post::query();\n\n    foreach(request()-\u003etoArray() as $filter =\u003e $value) {\n        $filter = Str::camel($filter);\n\n        if($posts-\u003ehasNamedScope($filter)) {\n            $posts-\u003e{$filter}($value);\n        }\n    }\n\n    return $posts-\u003epaginate(request-\u003eget('per_page', 15));\n}\n\n```\n\nYou need to create three scopes corresponding to each parameter, excluding per_page and page, which are passed to Laravel directly:\n\n```php\n// Eloquent model\n\npublic function scopeQueryBy($query, $value)\n{\n    return $query-\u003eWhere('name', 'like', '%' . $value . '%');\n}\n\npublic function scopeOrderedDesc($query, $value)\n{\n    return $query-\u003eorderBy($value, 'DESC');\n}\n\npublic function scopeOrderedAsc($query, $value)\n{\n    return $query-\u003eorderBy($value, 'ASC');\n}\n```\n\n## Developers\n\n```bash\nnpm install -g @vue/cli\n\n# OR\n\nyarn global add @vue/cli\n```\n\nYou will need an add-on service for Vue CLI\n\n```bash\nnpm install -g @vue/cli-service-global\n```\n\nRun local server\n\n```bash\nnpm run dev\n```\n\nRun production mode\n\n```bash\nnpm run build\n```\n\n## Next steps\n- Create a data table package for infinite loading\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarbosa89%2Fvue-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbarbosa89%2Fvue-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbarbosa89%2Fvue-table/lists"}