{"id":14990298,"url":"https://github.com/ovidijusparsiunas/active-table","last_synced_at":"2025-04-05T21:06:31.907Z","repository":{"id":58409100,"uuid":"531123975","full_name":"OvidijusParsiunas/active-table","owner":"OvidijusParsiunas","description":"Framework agnostic table component for editable data experience.","archived":false,"fork":false,"pushed_at":"2024-03-02T17:12:17.000Z","size":27453,"stargazers_count":162,"open_issues_count":10,"forks_count":9,"subscribers_count":6,"default_branch":"main","last_synced_at":"2024-05-02T06:04:01.846Z","etag":null,"topics":["angular","component","datagrid","edit","editable","editable-grid","editable-table","grid","javascript","nextjs","react","react-table","solid","svelte","svelte-table","table","vue","vue-table","web-component","xlsx"],"latest_commit_sha":null,"homepage":"https://activetable.io","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/OvidijusParsiunas.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},"funding":{"github":"OvidijusParsiunas","polar":"OvidijusParsiunas"}},"created_at":"2022-08-31T14:36:09.000Z","updated_at":"2024-05-03T11:15:33.970Z","dependencies_parsed_at":"2024-05-03T11:14:18.691Z","dependency_job_id":"11d27ae3-c16e-426a-bc48-74bb4733137c","html_url":"https://github.com/OvidijusParsiunas/active-table","commit_stats":null,"previous_names":["ovidijusparsiunas/editable-table-component"],"tags_count":17,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OvidijusParsiunas%2Factive-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OvidijusParsiunas%2Factive-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OvidijusParsiunas%2Factive-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OvidijusParsiunas%2Factive-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OvidijusParsiunas","download_url":"https://codeload.github.com/OvidijusParsiunas/active-table/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247399873,"owners_count":20932876,"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":["angular","component","datagrid","edit","editable","editable-grid","editable-table","grid","javascript","nextjs","react","react-table","solid","svelte","svelte-table","table","vue","vue-table","web-component","xlsx"],"created_at":"2024-09-24T14:19:51.196Z","updated_at":"2025-04-05T21:06:31.877Z","avatar_url":"https://github.com/OvidijusParsiunas.png","language":"TypeScript","funding_links":["https://github.com/sponsors/OvidijusParsiunas","https://polar.sh/OvidijusParsiunas"],"categories":[],"sub_categories":[],"readme":"\u003cbr /\u003e\n\n![alt text](./assets/readme/title.png)\n\n\u003cb\u003eActive Table\u003c/b\u003e is a fully customizable web component built with a focus on delivering the best editable table experience possible. Whether you need a simple table or a complex real-time data visualization grid, this component can be tailored to suit your specific needs! Explore [activetable.io](https://activetable.io/) to view all of the available features, how to use them, examples and more!\n\n### :rocket: Main Features\n\n- Add/Remove/Move/Edit rows/columns\n- Text validation\n- Sorting\n- Pagination\n- Filtering\n- Column types: Text/Number/Currency/Select/Label/Date/Checkbox\n- API for building custom column types\n- Import/Export/Paste/Drag\u0026Drop csv, xls, xlsx, ods, txt files\n- Programmatic cell updates\n- Reactive dimensions\n- Overflow handling\n- Everything is customizable!\n\n### :tada: Latest update\n\nTable [columns](https://activetable.io/docs/column#dragColumns) and [rows](https://activetable.io/docs/row#dragRows) can now be dragged using your mouse:\n\n\u003cp align=\"center\"\u003e\n \u003cimg width=\"650\" src=\"https://github.com/OvidijusParsiunas/active-table/assets/18709577/22095883-8beb-4be6-a75a-61beab3d6ea7\" alt=\"Drag Feature\"\u003e\n\u003c/p\u003e\n\n### :computer: Getting started\n\n```\nnpm install active-table\n```\n\nIf using React, install the following instead:\n\n```\nnpm install active-table-react\n```\n\nThen simply add this to your markup:\n\n```\n\u003cactive-table data='[[\"Planet\", \"Diameter\"], [\"Earth\", 12756]]'/\u003e\n```\n\nThe exact syntax for the above example will vary depending on the framework of your choice ([see here](https://activetable.io/examples/frameworks)).\n\n### :beginner: Examples\n\nCheck out the live codepen examples for your [UI framework/library](https://activetable.io/examples/frameworks) of choice:\n\n| React | Vue 2 | Vue 3 | Angular | Svelte | SvelteKit | Solid | Next | VanillaJS |\n| ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| \u003ca href=\"https://stackblitz.com/edit/deep-chat-react-bjtflv?file=src%2FApp.tsx\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/reactLogo.png\" width=\"60\"/\u003e\u003c/a\u003e | \u003ca href=\"https://codesandbox.io/s/active-table-vue2-32f04e?file=/src/App.vue\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png\" width=\"60\"/\u003e\u003c/a\u003e | \u003ca href=\"https://codesandbox.io/s/active-table-vue3-z729vs?file=/src/App.vue\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vueLogo.png\" width=\"60\"/\u003e\u003c/a\u003e | \u003ca href=\"https://codesandbox.io/s/active-table-angular-9v8nfe?file=/src/app/app.component.html\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/angularLogo.png\" width=\"66\"/\u003e\u003c/a\u003e | \u003ca href=\"https://stackblitz.com/edit/vitejs-vite-cm6j23?file=src%2FApp.svelte\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png\" width=\"45\"/\u003e\u003c/a\u003e | \u003cdiv align=\"center\"\u003e\u003ca href=\"https://codesandbox.io/p/sandbox/active-table-sveltekit-forked-fy9wlf\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/svelteLogo.png\" width=\"45\"/\u003e\u003c/a\u003e\u003c/div\u003e | \u003ca href=\"https://codesandbox.io/p/devbox/deep-chat-solidjs-forked-ngxphz\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/solidLogo.png\" width=\"60\"/\u003e\u003c/a\u003e | \u003ca href=\"https://codesandbox.io/p/sandbox/deep-chat-nextjs-9pv25f?file=%2Fpackage.json%3A6%2C19\u0026selection=%5B%7B%22endColumn%22%3A30%2C%22endLineNumber%22%3A28%2C%22startColumn%22%3A30%2C%22startLineNumber%22%3A28%7D%5D\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/nextLogo.png\" width=\"60\"/\u003e\u003c/a\u003e | \u003ca href=\"https://codesandbox.io/s/active-table-vanillajs-62yrrj?file=/index.html\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/OvidijusParsiunas/active-table/HEAD/website/static/img/vanillaJSLogo.png\" width=\"60\"/\u003e\u003c/a\u003e |\n\n## :heart: Contributions\n\nOpen source is built by the community for the community. All contributions to this project are welcome!\n\u003cbr\u003e Additionally, if you have any suggestions for enhancements, ideas on how to take the project further or have discovered a bug, do not hesitate to create a new issue ticket and we will look into it as soon as possible!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovidijusparsiunas%2Factive-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fovidijusparsiunas%2Factive-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fovidijusparsiunas%2Factive-table/lists"}