{"id":37419524,"url":"https://github.com/lunalobos/ll-grid-vue-3","last_synced_at":"2026-01-20T16:46:25.469Z","repository":{"id":306969904,"uuid":"962976498","full_name":"lunalobos/ll-grid-vue-3","owner":"lunalobos","description":"My custom grid implementation for Vue 3","archived":false,"fork":false,"pushed_at":"2025-08-31T17:39:47.000Z","size":93,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-31T17:59:28.247Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://ll-grid-vue-3.vercel.app","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lunalobos.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,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2025-04-09T01:01:56.000Z","updated_at":"2025-08-31T17:39:16.000Z","dependencies_parsed_at":"2025-07-28T19:25:35.134Z","dependency_job_id":"6ccd6709-d418-466c-8c1a-429800c30e43","html_url":"https://github.com/lunalobos/ll-grid-vue-3","commit_stats":null,"previous_names":["lunalobos/ll-grid-vue-3"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lunalobos/ll-grid-vue-3","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunalobos%2Fll-grid-vue-3","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunalobos%2Fll-grid-vue-3/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunalobos%2Fll-grid-vue-3/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunalobos%2Fll-grid-vue-3/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lunalobos","download_url":"https://codeload.github.com/lunalobos/ll-grid-vue-3/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lunalobos%2Fll-grid-vue-3/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":28477632,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-01-16T03:13:13.607Z","status":"ssl_error","status_checked_at":"2026-01-16T03:11:47.863Z","response_time":107,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"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":[],"created_at":"2026-01-16T06:05:11.332Z","updated_at":"2026-01-16T06:05:11.444Z","avatar_url":"https://github.com/lunalobos.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![npm](https://img.shields.io/npm/v/ll-grid-vue-3?logo=npm)](https://www.npmjs.com/package/ll-grid-vue-3)\n![License](https://img.shields.io/github/license/lunalobos/ll-grid-vue-3)\n\n![LL-Grid](https://ll-grid-vue-3.vercel.app/logo.webp)\n\n# LL-Grid for Vue 3\n\nLL-Grid is a powerful and flexible grid component for Vue 3, designed to handle datasets with ease. It provides a range of features including sorting, filtering, and pagination, making it ideal for applications that require efficient data management. The grid is built with performance in mind.  \n**At the moment the component is in alpha stage and is not yet ready for production use.**\n\n## Getting started\n\nYou will need to start by installing the package. You can do this by running the following command:\n\n```sh\nnpm install ll-grid-vue-3\n```\n\nAnd you will need to add the css to your main.js file:\n\n```js\nimport \"ll-grid-vue-3/dist/ll-grid.css\";\n```\n\nAfter that you can import the component in your Vue 3 application. You will need to import one of the grid components available. At the moment there are two: `GridDark` and `GridGreyMonochrome`.  \nThe `GridDark` component is a dark themed grid, while the `GridGreyMonochrome` component is a light themed grid.  \nThe following example shows how to import the `GridGreyMonochrome` component and use it in your application.  \nYou can use the `GridDark` component in the same way, just replace `GridGreyMonochrome` with `GridDark`.\n\n```vue\n\u003ctemplate\u003e\n  \u003cGridEmerald :getter=\"() =\u003e table\" class=\"inline-block\" style=\"width: 1100px\"/\u003e\n\u003c/template\u003e\n\n\u003cscript setup\u003e\n  import { GridEmerald, Table } from \"ll-grid-vue-3\";\n\n  const exampleModels = [\n    {\n      id: 1,\n      name: \"John Doe\",\n      age: 30,\n      email: \"john@example.com\",\n      country: \"USA\",\n      status: \"Active\",\n      registered: new Date(2022, 1, 15),\n      rating: 1.891,\n    },\n    {\n      id: 2,\n      name: \"Jane Smith\",\n      age: 25,\n      email: \"jane@example.com\",\n      country: \"Canada\",\n      status: \"Inactive\",\n      registered: new Date(2022, 11, 22),\n      rating: 1.423,\n    },\n    // ...more rows...\n  ];\n\n  const exampleTypes = {\n    id: \"number\",\n    name: \"text\",\n    age: \"number\",\n    email: \"text\",\n    country: \"text\",\n    status: \"text\",\n    registered: \"dateTime\",\n    rating: \"number\",\n  };\n\n  const exampleFormats = {\n    registered: \"en-US\",\n    rating: \"%.2\",\n  };\n\n  const options = {\n    types: exampleTypes,\n    pagination: [5, 10, 20],\n    formats: exampleFormats,\n    showTitle: false,\n    showFilters: true,\n  };\n\n  const table = new Table(\"My Table\", exampleModels, options);\n\u003c/script\u003e\n```\n\n---\n\nFor more details please refer to the [docs](https://ll-grid-vue-3.vercel.app/).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunalobos%2Fll-grid-vue-3","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flunalobos%2Fll-grid-vue-3","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flunalobos%2Fll-grid-vue-3/lists"}