{"id":17808122,"url":"https://github.com/svar-widgets/grid","last_synced_at":"2025-04-05T02:02:52.827Z","repository":{"id":257815623,"uuid":"867784181","full_name":"svar-widgets/grid","owner":"svar-widgets","description":"Svelte datagrid component. Lightweight, fast, feature-rich.","archived":false,"fork":false,"pushed_at":"2025-03-24T11:25:14.000Z","size":787,"stargazers_count":81,"open_issues_count":4,"forks_count":4,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-29T01:02:25.204Z","etag":null,"topics":["data-grid","data-grid-control","data-grid-view","data-table","data-table-component","datagrid","svelte","svelte-component","svelte-grid","svelte-table","svelte-ui-components","sveltejs","ui-component","ui-components"],"latest_commit_sha":null,"homepage":"https://svar.dev/svelte/datagrid/","language":"Svelte","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/svar-widgets.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","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":"2024-10-04T18:00:15.000Z","updated_at":"2025-03-24T11:25:17.000Z","dependencies_parsed_at":"2024-10-08T22:15:50.386Z","dependency_job_id":"aaa5df42-5895-469e-afb4-1a2e81653c2c","html_url":"https://github.com/svar-widgets/grid","commit_stats":null,"previous_names":["svar-widgets/grid"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fgrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fgrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fgrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/svar-widgets%2Fgrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/svar-widgets","download_url":"https://codeload.github.com/svar-widgets/grid/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247276159,"owners_count":20912288,"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":["data-grid","data-grid-control","data-grid-view","data-table","data-table-component","datagrid","svelte","svelte-component","svelte-grid","svelte-table","svelte-ui-components","sveltejs","ui-component","ui-components"],"created_at":"2024-10-27T15:06:17.958Z","updated_at":"2025-04-05T02:02:52.803Z","avatar_url":"https://github.com/svar-widgets.png","language":"Svelte","readme":"\u003cdiv align=\"center\"\u003e\n\t\n# SVAR Svelte DataGrid | Data Table\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n:globe_with_meridians: [Website](https://svar.dev/svelte/datagrid/) • :bulb: [Getting Started](https://docs.svar.dev/svelte/grid/getting_started/) • :eyes: [Demos](https://docs.svar.dev/svelte/grid/samples/#/base/willow)\n\n\u003c/div\u003e\n\n\u003cdiv align=\"center\"\u003e\n\n[![npm](https://img.shields.io/npm/v/wx-svelte-grid.svg)](https://www.npmjs.com/package/wx-svelte-grid)\n[![License](https://img.shields.io/github/license/svar-widgets/grid)](https://github.com/svar-widgets/grid/blob/main/license.txt)\n[![npm downloads](https://img.shields.io/npm/dm/wx-svelte-grid.svg)](https://www.npmjs.com/package/wx-svelte-grid)\n\n\u003c/div\u003e\n\nSVAR DataGrid is an advanced Svelte component that enhances standard data tables, enabling you to create high-performance, feature-rich data grids that efficiently handle large data sets. Fully customizable, it supports inline editing with a variety of cell editors to meet diverse project requirements.\n\n\u003cdiv align=\"center\"\u003e\n  \u003cimg src=\"https://cdn.svar.dev/public/react-grid.png\" alt=\"SVAR Svelte DataGrid - Screenshot\" width=\"700\"\u003e\n\u003c/div\u003e\n\n### Svelte 4 and Svelte 5 versions\n\nThere are two versions of the library: the 1.x version, designed to work with Svelte 4, and the 2.x version, created for Svelte 5. Please note that the 2.x version is in beta and may contain some instabilities.\n\nTo use the SVAR DataGrid beta for Svelte 5, install it as follows:\n\n```\nnpm install wx-svelte-grid\n```\n\nTo use the SVAR DataGrid for Svelte 4:\n\n```\nnpm install wx-svelte-grid@1.3.3\n```\n\n### :sparkles: Key Features\n\n-   High performance (virtual scrolling and dynamic loading)\n-   In-cell editing with different cell editors (datepicker, combo, select, rich select, etc.)\n-   Sorting by multiple columns\n-   Responsive design to adapt to different screen/container sizes\n-   Multiple row selection\n-   Fixed columns\n-   Expandable/collapsible columns\n-   Customizable tooltips for grid cells\n-   Context menu\n-   Tree-like structure\n-   Paging\n-   Export to CSV\n-   Keyboard navigation\n-   RestDataProvider for easy backend data binding\n-   Dark and light skins\n\n### :hammer_and_wrench: How to Use\n\nTo use SVAR DataGrid, simply import the package and include the component in your Svelte file:\n\n```svelte\n\u003cscript\u003e\n\timport { Grid } from \"wx-svelte-grid\";\n\n\tconst data = [\n\t\t{\n\t\t\tid: 12,\n\t\t\tname: \"Alex Brown\",\n\t\t\tyear: 1974,\n\t\t},\n\t];\n\tconst columns = [\n\t\t{\n\t\t\tid: \"name\",\n\t\t\theader: \"Title\",\n\t\t\tflexgrow: 1,\n\t\t\tsort: true,\n\t\t\teditor: \"text\",\n\t\t},\n\t\t{\n\t\t\tid: \"year\",\n\t\t\theader: \"Year\",\n\t\t\twidth: 100,\n\t\t\tsort: true,\n\t\t\teditor: \"text\",\n\t\t},\n\t];\n\u003c/script\u003e\n\n\u003cGrid {data} {columns} /\u003e\n```\n\nFor further instructions, see the detailed [how-to-start guide](https://docs.svar.dev/svelte/grid/getting_started).\n\n### :computer: How to Modify\n\nTypically, you don't need to modify the code. However, if you wish to do so, follow these steps:\n\n1. Run `yarn` to install dependencies. Note that this project is a monorepo using `yarn` workspaces, so npm will not work\n2. Start the project in development mode with `yarn start`\n\n### :white_check_mark: Run Tests\n\nTo run the test:\n\n1. Start the test examples with:\n    ```sh\n    yarn start:tests\n    ```\n2. In a separate console, run the end-to-end tests with:\n    ```sh\n    yarn test:cypress\n    ```\n\n### :speech_balloon: Need Help?\n\n[Post an Issue](https://github.com/svar-widgets/grid/issues/) or use our [community forum](https://forum.svar.dev).\n","funding_links":[],"categories":["UI Components"],"sub_categories":["Table"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Fgrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsvar-widgets%2Fgrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsvar-widgets%2Fgrid/lists"}