{"id":13395335,"url":"https://github.com/revolist/revogrid","last_synced_at":"2026-04-06T23:04:09.263Z","repository":{"id":37446592,"uuid":"261298767","full_name":"revolist/revogrid","owner":"revolist","description":"Powerful virtual data table smartsheet with advanced customization. Best features from excel plus incredible  performance 🔋","archived":false,"fork":false,"pushed_at":"2025-12-18T15:44:24.000Z","size":8535,"stargazers_count":3201,"open_issues_count":57,"forks_count":205,"subscribers_count":31,"default_branch":"main","last_synced_at":"2025-12-18T21:24:15.742Z","etag":null,"topics":["angular","angular-datagrid","data-grid","excel","excel-grid","export","filter","grid","pivot","react","react-datagrid","revo-grid","sorting","stenciljs","svelte","table","vuegrid","vuejs","vuejs-components","vuejs-grid"],"latest_commit_sha":null,"homepage":"https://rv-grid.com","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/revolist.png","metadata":{"files":{"readme":"readme.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":null,"patreon":null,"open_collective":"revogrid","ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2020-05-04T21:23:09.000Z","updated_at":"2025-12-18T15:44:28.000Z","dependencies_parsed_at":"2024-01-05T10:06:54.807Z","dependency_job_id":"561ff565-16dc-4127-8b12-98af9f18325c","html_url":"https://github.com/revolist/revogrid","commit_stats":{"total_commits":1179,"total_committers":28,"mean_commits":"42.107142857142854","dds":0.5614927905004241,"last_synced_commit":"55ee6881c9ce26ba8ce20e7ba06c4fd24550cf1f"},"previous_names":[],"tags_count":338,"template":false,"template_full_name":null,"purl":"pkg:github/revolist/revogrid","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevogrid","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevogrid/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevogrid/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevogrid/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/revolist","download_url":"https://codeload.github.com/revolist/revogrid/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/revolist%2Frevogrid/sbom","scorecard":{"id":772827,"data":{"date":"2025-08-11","repo":{"name":"github.com/revolist/revogrid","commit":"84691e14d1f67145ad6a28c58a513eaab46361d8"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":4.8,"checks":[{"name":"Code-Review","score":1,"reason":"Found 3/17 approved changesets -- score normalized to 1","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":"Maintained","score":10,"reason":"10 commit(s) and 2 issue activity found in the last 90 days -- score normalized to 10","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"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":"Token-Permissions","score":0,"reason":"detected GitHub workflow tokens with excessive permissions","details":["Warn: topLevel permissions set to 'write-all': .github/workflows/publish.yml:5"],"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":"Dangerous-Workflow","score":10,"reason":"no dangerous workflow patterns detected","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":"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":"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":"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":"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":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'main'"],"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":"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":"Pinned-Dependencies","score":0,"reason":"dependency not pinned by hash detected -- score normalized to 0","details":["Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:10: update your workflow using https://app.stepsecurity.io/secureworkflow/revolist/revogrid/publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:11: update your workflow using https://app.stepsecurity.io/secureworkflow/revolist/revogrid/publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:26: update your workflow using https://app.stepsecurity.io/secureworkflow/revolist/revogrid/publish.yml/main?enable=pin","Warn: GitHub-owned GitHubAction not pinned by hash: .github/workflows/publish.yml:27: update your workflow using https://app.stepsecurity.io/secureworkflow/revolist/revogrid/publish.yml/main?enable=pin","Info:   0 out of   4 GitHub-owned GitHubAction dependencies pinned"],"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":"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":"SAST","score":10,"reason":"SAST tool is run on all commits","details":["Info: all commits (20) 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":7,"reason":"3 existing vulnerabilities detected","details":["Warn: Project is vulnerable to: GHSA-968p-4wvh-cqc8","Warn: Project is vulnerable to: GHSA-v6h2-p8h4-qcjw","Warn: Project is vulnerable to: GHSA-3xgq-45jj-v275"],"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-23T02:39:22.868Z","repository_id":37446592,"created_at":"2025-08-23T02:39:22.868Z","updated_at":"2025-08-23T02:39:22.868Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30090038,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-04T18:31:08.343Z","status":"ssl_error","status_checked_at":"2026-03-04T18:31:07.708Z","response_time":59,"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":["angular","angular-datagrid","data-grid","excel","excel-grid","export","filter","grid","pivot","react","react-datagrid","revo-grid","sorting","stenciljs","svelte","table","vuegrid","vuejs","vuejs-components","vuejs-grid"],"created_at":"2024-07-30T17:01:52.910Z","updated_at":"2026-04-06T23:04:09.256Z","avatar_url":"https://github.com/revolist.png","language":"TypeScript","readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://rv-grid.com\"\u003e\n    \u003cimg src=\"./assets/logo.svg\" alt=\"RevoGrid Data Grid\" height=\"150\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@revolist/revogrid\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@revolist/revogrid\" alt=\"Latest Version on NPM\"/\u003e\u003c/a\u003e\n  \u003ca href=\"https://github.com/revolist/revogrid/blob/master/LICENSE\"\u003e\u003cimg src=\"https://img.shields.io/npm/l/@revolist/revogrid\" alt=\"Software License\"/\u003e\u003c/a\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/dependency-count/@revolist/revogrid\" alt=\"Dependency count\"/\u003e\n  \u003cimg src=\"https://badgen.net/bundlephobia/tree-shaking/@revolist/revogrid\" alt=\"Tree shaking\"/\u003e\n  \u003cimg src=\"https://img.shields.io/bundlephobia/min/@revolist/revogrid\" alt=\"Bundle size\"/\u003e\n  \u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=revolist_revogrid\u0026metric=alert_status\" alt=\"Sonar Quality Gate\"/\u003e\n  \u003ca href=\"https://github.com/revolist/revogrid/actions/workflows/unit.yml\"\u003e\n        \u003cimg src=\"https://github.com/revolist/revogrid/actions/workflows/unit.yml/badge.svg\" alt=\"Workflow status badge\" loading=\"lazy\" height=\"20\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/revolist/revogrid/actions/workflows/e2e.yml\"\u003e\n        \u003cimg src=\"https://github.com/revolist/revogrid/actions/workflows/e2e.yml/badge.svg\" alt=\"Workflow status badge\" loading=\"lazy\" height=\"20\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\n\u003ch3 align=\"center\"\u003ePowerful data grid component built with \u003ca href=\"https://stenciljs.com\" target=\"_blank\"\u003eStencilJS\u003c/a\u003e.\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\nSupport Millions of cells and thousands of columns easy and efficiently for fast data rendering. Easy to use.\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\nUsed by some of the largest companies in Europe and the United States.\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://rv-grid.com/demo/\"\u003eDemo and API\u003c/a\u003e •\n  \u003ca href=\"#key-features\"\u003eKey Features\u003c/a\u003e •\n  \u003ca href=\"#basic-usage\"\u003eHow To Use\u003c/a\u003e •\n  \u003ca href=\"#installation\"\u003eInstallation\u003c/a\u003e •\n  \u003ca href=\"https://rv-grid.com/guide/\"\u003eDocs\u003c/a\u003e •\n  \u003ca href=\"#license\"\u003eLicense\u003c/a\u003e\n\u003c/p\u003e\n\n\u003cimg src=\"./assets/material.jpg\" alt=\"Material grid preview\" width=\"100%\" /\u003e\n\u003ci\u003eRevoGrid material theme.\u003c/i\u003e\n\u003cbr\u003e\n\n\n## Key Features\n\n- **High Performance**: Handles millions of cells in the viewport with a powerful core built by default.\n\n- **[Accessibility](https://rv-grid.com/guide/wcag)**: Follows WAI-ARIA best practices.\n\n- **[RTL Support](https://rv-grid.com/guide/rtl)**: Comprehensive Right-to-Left language support for Arabic, Hebrew, Persian, and other RTL languages. Features automatic column reordering, proper text alignment, and layout adjustments for RTL interfaces.\n\n- **[Keyboard Support](https://rv-grid.com/guide/defs#Keyboard)**:\n  - Excel-like focus for efficient navigation and editing.\n  - Seamless copy/paste from Excel, Google Sheets, or any other sheet format.\n\n\n- **Lightweight**: Minimal initial bundle size ![Min size](https://badgen.net/bundlephobia/min/@revolist/revogrid@latest). Can be imported with polyfills or as a module for modern browsers.\n\n- **[Intelligent Virtual DOM](https://rv-grid.com/guide/overview#VNode-Reactive-DOM)**: Smart row recombination to minimize redraws.\n\n- **[Virtual Scroll](https://rv-grid.com/guide/viewports)**: Handles large datasets with infinite scroll.\n\n- **[Drag and Drop](https://rv-grid.com/guide/row/order)**: Drag and drop in [rows](https://rv-grid.com/guide/row/order) and [columns](https://rv-grid.com/guide/column/order).\n\n- **[Sorting](https://rv-grid.com/guide/sorting)**: Multiple options, customizable per column, with advanced event handling.\n\n- **[Filtering](https://rv-grid.com/guide/filters)**:\n  - Predefined system filters.\n  - Multi column filters.\n  - Conditional filters.\n  - Preserve existing collections.\n  - Selection.\n  - Slider.\n  - Header filtering.\n  - Custom filters to extend system filters with your own set.\n\n- **[Export](https://rv-grid.com/guide/export.plugin)**: Export data to file.\n\n- **Custom Sizes**: Define custom sizes for [columns](https://rv-grid.com/guide/column/#Column-Size) and [rows](https://rv-grid.com/guide/row/height). Automatic sizing based on content.\n\n- **[Column Resizing](https://rv-grid.com/guide/column/resize)**: Adjust column widths.\n- **Auto Size Columns**: Intelligent column width adjustment that automatically adapts to content, ensuring optimal readability and layout efficiency.\n\n- **Pinned/Sticky/Freezed Elements**:\n  - [Columns](https://rv-grid.com/guide/column/pin) (define left or right).\n  - [Rows](https://rv-grid.com/guide/row/pin) (define top or bottom).\n\n- **Grouping**:\n  - [Column grouping](https://rv-grid.com/guide/column/grouping) (nested headers).\n  - Column grouping Drill Down: Collapse grouping columns to streamline your grid view, trimming away unnecessary columns and enhancing data organization. Perfect for focusing on the information that matters most, while keeping your workspace clean and efficient.\n  - [Row grouping](https://rv-grid.com/guide/row/grouping) (nested rows).\n\n- **Column Types**: [More details](https://rv-grid.com/guide/column/#Column-Formats)\n  - [Text/String](https://rv-grid.com/guide/column/types#String) (default).\n  - [Number](https://rv-grid.com/guide/column/types#Number).\n  - [Select/Dropdown](https://rv-grid.com/guide/column/types#Select-Dropdown).\n  - [Date](https://rv-grid.com/guide/column/types#Date).\n  - Custom (create extended styles using any template).\n\n- **Range Operations**:\n  - [Selection](https://rv-grid.com/guide/defs#Range).\n  - [Editing](https://rv-grid.com/guide/defs#Range-Autofill).\n\n- **[Theme Packages](https://rv-grid.com/guide/theme)**:\n  - Excel-like (default).\n  - Material (compact, dark, or light).\n\n- **[Extensibility](https://rv-grid.com/guide/jsx.template)**: Modern VNode features and tsx support for easy extension.\n\n- **[Trimmed Rows](https://rv-grid.com/guide/row/#Trimmed-Rows)**: Hide rows on demand.\n\n- **[Plugin System](https://rv-grid.com/guide/plugin/)**: Create custom plugins or extend existing ones easily.\n\n- **[Formula Support](https://rv-grid.com/guide/cell/formula)**: Evaluate formulas in cell data with Excel-like syntax, including basic arithmetic, statistical functions, and cell references.\n- **[Pivot Table](https://rv-grid.com/demo/pivot)**: Transform and analyze data dynamically with drag-and-drop field arrangement, aggregation functions, and interactive filtering capabilities.\n\n- **[Master Detail/Subtables/Forms](https://rv-grid.com/guide/row/master.pro)**: Expand rows to reveal child data.\n- **[Cell/Column/Row Span/Merge](https://rv-grid.com/guide/cell/merge)**: Merge cells to form groups.\n- **Auto Merge**: Automatically merges cells with identical values in a column.\n- **Form editig**: Edit forms directly within the grid, featuring all necessary fields, including custom options and markdown support for a fast and enhanced data entry experience.\n\n- **Customizations**:\n  - [Column header template](https://rv-grid.com/guide/column/header.template).\n  - [Row header template](https://rv-grid.com/guide/row/headers).\n  - [Cell properties](https://rv-grid.com/guide/cell/) (define custom properties for rendered cells).\n  - Nested grids: Build a grid inside a grid, showcasing advanced editing options and user interactions for a more dynamic data presentation.\n  - Context Menu: Build context menus for any grid element - from cells to headers. Cut, copy, paste, add rows, modify columns, and more. Fully customizable with your own actions and behaviors.\n\n- **[AI Agents and MCP](https://rv-grid.com/guide/mcp)**: Connect Codex, Cursor, Claude Code, and VS Code to version-aware RevoGrid docs, examples, migrations, feature availability, and typed API context.\n\n  - [Cell template](https://rv-grid.com/guide/cell/renderer) (create your own cell views).\n  - [Cell editor](https://rv-grid.com/guide/cell/editor) (use predefined or apply your own custom editors and cell types).\n\n- **Rich API \u0026 Additional Improvements**: Explore hundreds of other small customizations and improvements in [RevoGrid](https://rv-grid.com/).\n\n\u003ch2 align=\"center\"\u003eFramework Friendly\u003c/h2\u003e\n\n\u003cp align=\"center\"\u003e\n\u003cimg src=\"./assets/framework.png\" alt=\"Framework friendly\" width=\"100%\" max-width=\"500px\" style=\"max-width: 600px\"/\u003e\n\u003cp align=\"center\"\u003e\n\u003ci\u003eI am RevoGrid, your solution for efficiently representing large datasets \u003cbr /\u003e in an \"Excel-like\" data table or as a list. Render native components inside each cell!\u003c/i\u003e\n\u003c/p\u003e\n\u003c/p\u003e\n\n\u003cbr\u003e\n\u003cbr\u003e\n\u003cbr\u003e\n\n\n## Installation\n\nThe library published as a [scoped NPM package](https://docs.npmjs.com/misc/scope) in the [NPMJS Revolist account](https://www.npmjs.com/org/revolist).\n[Check for more info on our demo side](https://rv-grid.com/guide/installation).\n\nWith NPM:\n\n```bash\nnpm i @revolist/revogrid --save;\n```\n\nWith Yarn:\n\n```bash\nyarn add @revolist/revogrid;\n```\n\n## Browser Support\n\n| ![Chrome](https://raw.github.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png) | ![Firefox](https://raw.github.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png) | ![Safari](https://raw.github.com/alrra/browser-logos/master/src/safari/safari_48x48.png) | ![Opera](https://raw.github.com/alrra/browser-logos/master/src/opera/opera_48x48.png) | ![Edge](https://raw.github.com/alrra/browser-logos/master/src/edge/edge_48x48.png) |\n| ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------- |\n| Latest ✔   | Latest ✔ | Latest ✔ | Latest ✔ | Latest ✔ |\n|\n\n## Framework\n\nIn `\u003crevo-grid /\u003e` we have developed a sophisticated Continuous Delivery (CD) system powered by GitHub Actions. This advanced system automatically builds and delivers grid versions across multiple frameworks, including React, Angular, Svelte, Vue 2, and Vue 3, with full type support. This ensures continuous version delivery, providing the latest grid enhancements and upgrades across all supported frameworks ✨. In the future (version 5), we are planning to switch to monorepo based development.\n\n\n\n- [![VueJs](./assets/vuejs.svg) Vue 3](https://rv-grid.com/guide/vue3/) and [Vue 2](https://rv-grid.com/guide/vue2/)\n- [![React](./assets/react.svg) React](https://rv-grid.com/guide/react/)\n- [![Angular](./assets/angular.svg) Angular](https://rv-grid.com/guide/angular/)\n- [![Svelte](./assets/svelte.svg) Svelte](https://rv-grid.com/guide/svelte/)\n- [![JavaScript](./assets/js.svg) JavaScript](https://rv-grid.com/guide/)\n\n## Basic Usage\n\nRevoGrid functions as a web component. Simply place the component on your page and access its properties as you would with any other HTML element. It also offers multiple ways to integrate our grid into your project:\n\n- [Import the grid into your project](https://rv-grid.com/guide/installation)\n\n### JavaScript Data Grid Simple Usage\n\n```javascript\n// Select the RevoGrid element from the DOM\nconst grid = document.querySelector('revo-grid');\n\n// Define the columns for the grid\ngrid.columns = [{ prop: 'name', name: 'First Column' }, { prop: 'details' }];\n// Define the data source for the grid\ngrid.source = [{ name: 'New Item', details: 'Item Description' }];\n```\n\n### Custom cell template\n\n```javascript\n// Select the RevoGrid element from the DOM\nconst grid = document.querySelector('revo-grid');\n\n// Define the columns for the grid\ngrid.columns = [\n  {\n    prop: 'name',\n    name: 'Custom cell template',\n    // Custom cell template\n    cellTemplate(h, { value }) {\n      return h(\n        'div',\n        {\n          style: { backgroundColor: 'red' }, // Styling the cell background\n          class: { 'inner-cell': true }, // Adding a CSS class\n        },\n        value || '' // Display the cell content or an empty string if undefined\n      );\n    },\n  },\n];\n// Define the data source for the grid\ngrid.source = [{ name: 'New Item' }];\n```\n\n[Example and guide](https://rv-grid.com/guide/)\n\n\n- [![VueJs](./assets/vuejs.svg) Vue 3](https://rv-grid.com/guide/vue3/) and [Vue 2](https://rv-grid.com/guide/vue2/)\n- [![React](./assets/react.svg) React](https://rv-grid.com/guide/react/)\n- [![Angular](./assets/angular.svg) Angular](https://rv-grid.com/guide/angular/)\n- [![Svelte](./assets/svelte.svg) Svelte](https://rv-grid.com/guide/svelte/)\n- [![JavaScript](./assets/js.svg) JavaScript](https://rv-grid.com/guide/)\n\n## Versions\n\n- **2.0+**: Introduced the plugin system, grouping, sorting, and filtering.\n- **3.0+**: Breaking changes introduced:\n    -   Removed the redundant viewport component.\n    -   Renamed classes to support Bootstrap and other libraries:\n        -   `row` -\u003e `rgRow`\n        -   `col` -\u003e `rgCol`\n        -   `data-cell` -\u003e `rgCell`\n        -   `data-header-cell` -\u003e `rgHeaderCell`\n    -   Migrated all method names to lowercase to align with modern event naming conventions. For example, `afterEdit` is now `afteredit`. Check the API for details.\n    -   Added support for pure ESM modules to enable the use of the grid in all modern frontend tooling like Vite, Parcel, etc. You can now import custom elements without lazy loading. Note that you are responsible for polyfills.\n\n\n- **4.0+**: Breaking changes introduced. See the [migration guide](https://rv-grid.com/guide/migration). \n\n-   Redesigned type support:\n        - Removed deprecated namespaces:\n            - **Before**: `RevoGrid.ColumnRegular`\n            - **Now**: `ColumnRegular`;\n        - Improved type import:\n            - **Before**: `import { RevoGrid } from '@revolist/revogrid/dist/types/interfaces'`\n            - **Now**: `import { ColumnRegular } from '@revolist/revogrid'`.\n        - Changed viewport type names everywhere. For example, before: `rowDefinitions: [{ type: \"row\", index: 0, size: 145 }]`, after: `rowDefinitions: [{ type: \"rgRow\", index: 0, size: 145 }]`.\n    -   Updated [event](https://rv-grid.com/guide/api/revoGrid.html#Events) naming convention. Review your [event](https://rv-grid.com/guide/api/revoGrid.html#Events) usage. [Event names](https://rv-grid.com/guide/api/revoGrid.html#Events) are all lowercase now and are aligned with modern event naming conventions. For example, `afterEdit` -\u003e `afteredit`.\n    - Multiple event breaking changes introduced: beforerowrender now returns `BeforeRowRenderEvent`. Check all events for details.\n\n-   **Major improvements**:\n    -   Rethought the entire framework approach. Introduced Pro version with advance support and pro features.\n    -   Introduced slot support.\n    -   Updated scrolling system for better mobile support.\n    -   Advance template support. Introduced `additionalData` for templates and editors. `Prop` gives access to parent/root app context.\n    -   Redesigned the documentation.\n    -   Fixed major issues and significantly improved overall performance, making the grid multiple time faster.\n    -   Enhanced plugin support - now with full access to grid providers.\n    -   Updated documentation.\n    -   Provided full framework support and native render for  Angular, React, Svelte and Vue.\n \n-   **What next?**\n    -   Check our [Roadmap](https://github.com/users/revolist/projects/3)\n\n\n## Our Sponsors\n\nWe would like to extend our heartfelt gratitude to our sponsors for their generous support. Their contributions help us maintain and develop RevoGrid.\n\n[![Altruistiq](https://cdn.prod.website-files.com/62cd69e08130a1a33f5ef900/6310b4d500e971695db5e9c3_615b5db69ce8931a276e5ed2_Social_Icons_AQ_3_32x32.png)](https://altruistiq.com)\n\n\n### Become a Sponsor\n\nIf you or your company would like to support the ongoing development of RevoGrid, please consider [![Sponsor Us](https://img.shields.io/badge/Sponsor%20Us-%F0%9F%92%96-brightgreen)](https://opencollective.com/revogrid) or use a [Pro version](https://rv-grid.com/pro/). Your support will help us continue to improve the project and provide the best possible tool for the community.\n\nThank you for supporting RevoGrid! 🙏\n\n\n## Testing\n\n[![Unit Tests](https://github.com/revolist/revogrid/actions/workflows/ci-unit.yml/badge.svg?branch=main)](https://github.com/revolist/revogrid/actions/workflows/ci-unit.yml)\n[![E2E Tests](https://github.com/revolist/revogrid/actions/workflows/ci-e2e.yml/badge.svg?branch=main)](https://github.com/revolist/revogrid/actions/workflows/ci-e2e.yml)\n\nRevoGrid is thoroughly tested to ensure reliability and stability.\n\n| Suite | Command | Scope |\n|---|---|---|\n| Unit | `npm run test` | Services, utilities, pure logic |\n| E2E (Playwright) | `npm run test:e2e` | Real browser rendering \u0026 interaction |\n\n### E2E Tests\n\nEnd-to-end tests use [@stencil/playwright](https://www.npmjs.com/package/@stencil/playwright) to run `\u003crevo-grid\u003e` in a real Chromium browser. The dev server starts automatically when you run:\n\n```bash\nnpm run test:e2e\n```\n\nTest files live in `e2e/` and share helpers from `e2e/helpers.ts`:\n\n\n## Contributing\n\nBy getting involved, you'll have the opportunity to enhance your skills, gain valuable experience, and make a significant impact on an innovative project. Your contribution, no matter how big or small, is valuable.\n\n### Why Contribute?\n\n- **Expand Your Knowledge**: Working on complex libraries allows you to dive deep into modern web technologies, improve your coding skills, and learn best practices in performance optimization, data handling, and component-based architecture.\n- **Experience**: Contributing to an open-source project like provides you with practical experience that can be a great addition to your portfolio. It demonstrates your ability to work collaboratively, solve complex problems, and contribute to a project's success.\n- **Professional Growth**: By contributing, you become part of a network of talented developers. This can lead to mentorship opportunities, collaborations, and professional connections that can benefit your career. \n\n\n## License\n\nMIT\n\n---\n\n","funding_links":["https://opencollective.com/revogrid"],"categories":["UI Components","HarmonyOS","Data Tables \u0026 Grids","Spreadsheet","TypeScript","Chart \u0026 Data Visualization","Recently Updated","Third Party Components","Ecosystem Highlights","Components built with Stencil"],"sub_categories":["Editable data grid / spreadsheet","Windows Manager","Runner","JavaScript","[Sep 02, 2024](/content/2024/09/02/README.md)","Data Grids","Component Libraries \u0026 Widgets","Community"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frevolist%2Frevogrid","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frevolist%2Frevogrid","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frevolist%2Frevogrid/lists"}