{"id":25676384,"url":"https://github.com/table4js/components","last_synced_at":"2025-04-23T13:34:50.454Z","repository":{"id":37740873,"uuid":"485860155","full_name":"table4js/components","owner":"table4js","description":"Abris Lab components monorepo: table4js","archived":false,"fork":false,"pushed_at":"2023-05-24T06:05:45.000Z","size":5580,"stargazers_count":4,"open_issues_count":6,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-03-23T01:41:20.401Z","etag":null,"topics":["datagrid","grid","javascript","knockoutjs","react","table","typescript"],"latest_commit_sha":null,"homepage":"https://table4js.com","language":"JavaScript","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/table4js.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}},"created_at":"2022-04-26T16:14:00.000Z","updated_at":"2024-01-12T18:29:54.000Z","dependencies_parsed_at":"2023-02-19T01:31:03.738Z","dependency_job_id":null,"html_url":"https://github.com/table4js/components","commit_stats":null,"previous_names":["abris-platform/abris-components"],"tags_count":29,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/table4js%2Fcomponents","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/table4js%2Fcomponents/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/table4js%2Fcomponents/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/table4js%2Fcomponents/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/table4js","download_url":"https://codeload.github.com/table4js/components/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240493299,"owners_count":19810259,"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":["datagrid","grid","javascript","knockoutjs","react","table","typescript"],"created_at":"2025-02-24T14:26:12.626Z","updated_at":"2025-02-24T14:26:13.110Z","avatar_url":"https://github.com/table4js.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![Build Project](https://github.com/table4js/components/actions/workflows/webpack.yml/badge.svg)](https://github.com/table4js/components/actions/workflows/webpack.yml)\n[![npm version](https://badge.fury.io/js/table4js.svg)](https://badge.fury.io/js/table4js)\n\n\u003ca href=\"https://github.com/table4js/components/pulse\" alt=\"Activity\"\u003e\n\u003cimg src=\"https://img.shields.io/github/commit-activity/m/table4js/components\" /\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/table4js/components/issues\"\u003e\n\u003cimg alt=\"Issues\" title=\"Open Issues\" src=\"https://img.shields.io/github/issues/table4js/components.svg\"\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/table4js/components/issues?utf8=%E2%9C%93\u0026q=is%3Aissue+is%3Aclosed+\"\u003e\n\u003cimg alt=\"Closed issues\" title=\"Closed Issues\" src=\"https://img.shields.io/github/issues-closed/table4js/components.svg\"\u003e\n\u003c/a\u003e\n\n# components\nThis is a monorepository of JavaScript (TypeScript) components library. Right now it contains UI the only component: \n- table (grid) widget\n\nThe Table4JS widget is implemented for 3 web frameworks:\n- PureJS (pure JavaScript package with no dependencies, with bundled Knockout engine inside) - [table4js package](https://www.npmjs.com/package/table4js)\n- React - [table4react package](https://www.npmjs.com/package/table4react)\n- Knockout - [table4ko package](https://www.npmjs.com/package/table4ko)\n\n## Table4JS widget functionality\n\n![Table4JS](./site/img/features/4.svg)\n\nTable widget shows data in table (grid) form. It supports infinite scrolling, array datasets, sever-side data provider, filtering, sorting and columns summary. Widget allows to modify data via inplace editing, create and delete rows. \n\n## Getting started with Table4JS\n\n### Pure JS - non-modular web application\n\nAdd the following scripts to HEAD part of your HTML file\n```HTML\n\u003cscript src=\"https://unpkg.com/table4js\"\u003e\u003c/script\u003e\n\u003clink href=\"https://unpkg.com/table4js/table4.css\" rel=\"stylesheet\"\u003e\n```\n\nAdd the following markup to BODY part of your HTML file - where you want to see a table\n```HTML\n\u003cdiv id=\"table-container\" style=\"height: calc(100vh - 16px);\"\u003e\u003c/div\u003e\n```\n\nAdd the following script to make it work\n```JS\nvar options = {\n    enableSearch: true,\n    enableSummary: true,\n    columns: [\n        {\n            name: \"word\",\n            title: \"Word\"\n        },\n        {\n            name: \"num\",\n            title: \"Number\",\n            type: \"number\"\n        },\n        {\n            name: \"text\",\n            title: \"Text\",\n        }\n    ],\n};\n\nvar model = new Table4JS.Table(options);\n\nvar sampleData = [\n    { word: \"here \", num: 5, text: \"O gentlemen, there is no need for you to confess your happiness, no one requires you to confess - who does not know your modesty!\" },\n    { word: \"there \", num: 24, text: \"Their bearing, although they were not completely calm, with its ease, full of dignity and humility at the same time, aroused admiration\" },\n    { word: \"there \", num: 18, text: \"I'm to blame, I'm to blame, because I choose my own people.\" }\n];\nmodel.data = sampleData;\n\nmodel.render(\"#table-container\");\n```\n\nHere is the table4js [live example with the above code](https://plnkr.co/edit/wBrB0EznDixVV1ra?open=lib%2Fscript.js\u0026preview)\n\n### React\n\nPlease check [table4react](https://www.npmjs.com/package/table4react) package readme file\n\n### Knockout\n\nPlease check [table4ko](https://www.npmjs.com/package/table4ko) package readme file\n\n### More info\n\nFor more advanced cases please check our [online demos](https://table4js.com/examples) and [documentation](https://table4js.com/docs)\n\n## Project site and resources\nOur official sie is [https://table4js.com](https://table4js.com)\n\n### Online demos\n[https://table4js.com/examples](https://table4js.com/examples)\n\nThe demos are framework-specific and you can choose your framework via selector Standalone/Knockout/React in the top left corner of the navigation panel. Each demo has html/js/css tab where you can get markup, css or JavaScript code to use in your application. Each demo also can be opened in a separate window.\n\n### Documentation\nAlmost all code ralated to the Table4JS widget core functionality is cross-framework and used as a model for platform-specific rendering. You need to create widget model and set it properties or subscribe events to control table widget behavior. Table4JS model is described in our documentation:\n\n[https://table4js.com/docs](https://table4js.com/docs)\n\n## Roadmap for 2023\nIn our plans we have\n- Demos and documentation improvements\n- Row editing in a separate detail form\n- Accessibility support\n- Angular and Vue frameworks support\n- Tree widget\n\n## How to compile this repo\n - git clone https://github.com/table4js/components.git\n - cd components\n - npm i\n - npm test\n - npm run build\n\nBuild artifacts can be found in the `/site/dist` subfolders: `standalone`, `react`, `knockout`\n\n## How to run live example\n - `npm start` - for standalone (framework-agnostic) build\n - `npm start:react` - for ReactJS framework version\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftable4js%2Fcomponents","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftable4js%2Fcomponents","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftable4js%2Fcomponents/lists"}