{"id":21291885,"url":"https://github.com/idea2app/mobx-restful-table","last_synced_at":"2026-03-11T07:02:26.324Z","repository":{"id":64223982,"uuid":"574221915","full_name":"idea2app/MobX-RESTful-table","owner":"idea2app","description":"A super Table component suite for CRUD operation, which is based on MobX RESTful \u0026 React. Just define your Data structures \u0026 API routes, administrator pages will be built in minutes.","archived":false,"fork":false,"pushed_at":"2025-12-05T20:03:08.000Z","size":3039,"stargazers_count":5,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-09T09:14:01.949Z","etag":null,"topics":["component","crud","mobx","react","restful","table"],"latest_commit_sha":null,"homepage":"https://idea2app.github.io/MobX-RESTful-table/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"lgpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/idea2app.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,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2022-12-04T19:48:28.000Z","updated_at":"2025-12-05T20:02:30.000Z","dependencies_parsed_at":"2023-01-15T05:46:14.781Z","dependency_job_id":"f55ececc-4130-41d1-b106-a9c8fea1fb5c","html_url":"https://github.com/idea2app/MobX-RESTful-table","commit_stats":{"total_commits":14,"total_committers":1,"mean_commits":14.0,"dds":0.0,"last_synced_commit":"84d595dd74fa1a569ec9609fad6b0709c3b8d06f"},"previous_names":[],"tags_count":46,"template":false,"template_full_name":null,"purl":"pkg:github/idea2app/MobX-RESTful-table","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-RESTful-table","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-RESTful-table/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-RESTful-table/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-RESTful-table/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/idea2app","download_url":"https://codeload.github.com/idea2app/MobX-RESTful-table/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/idea2app%2FMobX-RESTful-table/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30373509,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-11T06:09:32.197Z","status":"ssl_error","status_checked_at":"2026-03-11T06:09:17.086Z","response_time":84,"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":["component","crud","mobx","react","restful","table"],"created_at":"2024-11-21T13:46:35.660Z","updated_at":"2026-03-11T07:02:26.319Z","avatar_url":"https://github.com/idea2app.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# MobX RESTful table\n\nA **Pagination Table** \u0026 **Scroll List** component suite for [CRUD operation][1], which is based on [MobX RESTful][2] \u0026 [React][3].\n\n[![MobX compatibility](https://img.shields.io/badge/Compatible-1?logo=mobx\u0026label=MobX%206%2F7)][4]\n[![NPM Dependency](https://img.shields.io/librariesio/github/idea2app/MobX-RESTful-table.svg)][5]\n[![CI \u0026 CD](https://github.com/idea2app/MobX-RESTful-table/actions/workflows/main.yml/badge.svg)][6]\n\n[![NPM](https://nodei.co/npm/mobx-restful-table.png?downloads=true\u0026downloadRank=true\u0026stars=true)][7]\n\n- API document: https://idea2app.github.io/MobX-RESTful-table/\n- Preview site: https://idea2app.github.io/MobX-RESTful-table/preview/\n\n## Versions\n\n| SemVer |    status    | ES decorator |    MobX     |\n| :----: | :----------: | :----------: | :---------: |\n| `\u003e=2`  | ✅developing |   stage-3    |  `\u003e=6.11`   |\n|  `\u003c2`  | ❌deprecated |   stage-2    | `\u003e=4 \u003c6.11` |\n\n## Components\n\n1. [Badge Bar](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeBar.html)\n2. [Image Preview](https://idea2app.github.io/MobX-RESTful-table/classes/ImagePreview.html)\n3. [File Preview](https://idea2app.github.io/MobX-RESTful-table/functions/FilePreview-1.html)\n4. [File Picker](https://idea2app.github.io/MobX-RESTful-table/classes/FilePicker.html)\n5. [File Uploader](https://idea2app.github.io/MobX-RESTful-table/classes/FileUploader.html)\n6. [Form Field](https://idea2app.github.io/MobX-RESTful-table/functions/FormField-1.html)\n7. [Range Input](https://idea2app.github.io/MobX-RESTful-table/classes/RangeInput.html)\n8. [Badge Input](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeInput.html)\n9. [Array Field](https://idea2app.github.io/MobX-RESTful-table/classes/ArrayField.html)\n10. [REST Form](https://idea2app.github.io/MobX-RESTful-table/classes/RestForm.html)\n11. [Pager](https://idea2app.github.io/MobX-RESTful-table/functions/Pager-1.html)\n12. [REST Table](https://idea2app.github.io/MobX-RESTful-table/classes/RestTable.html)\n13. [Scroll Boundary](https://idea2app.github.io/MobX-RESTful-table/functions/ScrollBoundary-1.html)\n14. [Scroll List](https://idea2app.github.io/MobX-RESTful-table/classes/ScrollList.html)\n15. [Searchable Input](https://idea2app.github.io/MobX-RESTful-table/classes/SearchableInput.html)\n\n## Installation\n\n```shell\nnpm i react \\\n  mobx \\\n  mobx-react \\\n  mobx-i18n \\\n  mobx-restful \\\n  mobx-restful-table\n```\n\n## Configuration\n\n### `index.html`\n\n```html\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/bootstrap@5.3.8/dist/css/bootstrap.min.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/bootstrap-icons@1.13.1/font/bootstrap-icons.css\" /\u003e\n\u003clink rel=\"stylesheet\" href=\"https://unpkg.com/mobx-restful-table@2.6.2/dist/index.css\" /\u003e\n```\n\n### `tsconfig.json`\n\n```json\n{\n  \"compilerOptions\": {\n    \"target\": \"ES6\",\n    \"module\": \"ES6\",\n    \"moduleResolution\": \"Node\",\n    \"useDefineForClassFields\": true,\n    \"jsx\": \"react-jsx\",\n    \"skipLibCheck\": true,\n    \"lib\": [\"ES2023\", \"DOM\"]\n  }\n}\n```\n\n### Internationalization\n\n1. [set up Text in UI][8]\n2. [import Text files][9]\n\n### Data source\n\n1. [set up HTTP client][10]\n2. [implement Model class][11]\n\n## Initialization\n\n### Pagination Table\n\nInspired by [Ant Design - Pro Table](https://procomponents.ant.design/components/table)\n\n- [Source Code][12]\n- [Preview Link][13]\n\n```tsx\nimport { computed } from 'mobx';\nimport { observer } from 'mobx-react';\nimport { Component } from 'react';\nimport { Container, Button, Badge } from 'react-bootstrap';\nimport { BadgeBar, Column, RestTable } from 'mobx-restful-table';\n\nimport repositoryStore, { Repository } from '../models/Repository';\nimport { i18n } from '../models/Translation';\n\n@observer\nexport default class PaginationPage extends Component {\n  @computed\n  get columns(): Column\u003cRepository\u003e[] {\n    const { t } = i18n;\n\n    return [\n      {\n        key: 'full_name',\n        renderHead: t('repository_name'),\n        renderBody: ({ html_url, full_name }) =\u003e (\n          \u003ca target=\"_blank\" href={html_url}\u003e\n            {full_name}\n          \u003c/a\u003e\n        ),\n        required: true,\n        minLength: 3,\n        invalidMessage: 'Input 3 characters at least',\n      },\n      { key: 'homepage', type: 'url', renderHead: t('home_page') },\n      { key: 'language', renderHead: t('programming_language') },\n      {\n        key: 'topics',\n        renderHead: t('topic'),\n        renderBody: ({ topics }) =\u003e (\n          \u003cBadgeBar\n            list={(topics || []).map(text =\u003e ({ text, link: `https://github.com/topics/${text}` }))}\n          /\u003e\n        ),\n      },\n      { key: 'stargazers_count', type: 'number', renderHead: t('star_count') },\n      {\n        key: 'description',\n        renderHead: t('description'),\n        contentEditable: true,\n        renderBody: ({ description }) =\u003e (\n          \u003cp className=\"m-0 text-truncate\" style={{ maxWidth: '10rem' }} title={description}\u003e\n            {description}\n          \u003c/p\u003e\n        ),\n      },\n    ];\n  }\n\n  render() {\n    return (\n      \u003cContainer style={{ height: '91vh' }}\u003e\n        \u003cRestTable\n          className=\"text-center\"\n          striped\n          hover\n          editable\n          deletable\n          columns={this.columns}\n          store={repositoryStore}\n          translator={i18n}\n          onCheck={console.log}\n        /\u003e\n      \u003c/Container\u003e\n    );\n  }\n}\n```\n\n### Scroll List\n\n[Preview Link][14]\n\n#### `pages/scroll-list.tsx`\n\n[Source Code][15]\n\n```tsx\nimport { observer } from 'mobx-react';\nimport { FC } from 'react';\nimport { Container, Row, Col } from 'react-bootstrap';\nimport { Loading } from 'idea-react';\nimport { ScrollList } from 'mobx-restful-table';\n\nimport { GitCard } from '../components/Git';\nimport repositoryStore from '../models/Repository';\nimport { i18n } from '../models/Translation';\n\nconst ScrollListPage: FC = observer(() =\u003e (\n  \u003cContainer\u003e\n    \u003ch1 className=\"my-4\"\u003e{i18n.t('scroll_list')}\u003c/h1\u003e\n\n    {repositoryStore.downloading \u003e 0 \u0026\u0026 \u003cLoading /\u003e}\n\n    \u003cScrollList\n      translator={i18n}\n      store={repositoryStore}\n      renderList={allItems =\u003e (\n        \u003cRow as=\"ul\" className=\"list-unstyled g-4\" xs={1} sm={2}\u003e\n          {allItems.map(item =\u003e (\n            \u003cCol as=\"li\" key={item.id}\u003e\n              \u003cGitCard className=\"h-100 shadow-sm\" {...item} /\u003e\n            \u003c/Col\u003e\n          ))}\n        \u003c/Row\u003e\n      )}\n    /\u003e\n  \u003c/Container\u003e\n));\n\nexport default ScrollListPage;\n```\n\n### File Uploader\n\n#### `model/File.ts`\n\n```ts\nimport { toggle } from 'mobx-restful';\nimport { FileModel } from 'mobx-restful-table';\n\nimport { uploadFile } from '../utility';\n\nexport class AssetFileModel extends FileModel {\n  @toggle('uploading')\n  async upload(file: File) {\n    const URI = await uploadFile(file);\n\n    return super.upload(URI);\n  }\n}\n\nexport default new AssetFileModel();\n```\n\n#### `page/editor.tsx`\n\n```tsx\nimport { FileUploader } from 'mobx-restful-table';\n\nimport fileStore from '../model/File';\n\nexport const EditorPage = () =\u003e (\n  \u003cFileUploader\n    store={fileStore}\n    accept=\"image/*\"\n    name=\"images\"\n    multiple\n    required\n    onChange={console.log}\n  /\u003e\n);\n```\n\n[1]: https://en.wikipedia.org/wiki/Create,_read,_update_and_delete\n[2]: https://github.com/idea2app/MobX-RESTful\n[3]: https://reactjs.org/\n[4]: https://mobx.js.org/\n[5]: https://libraries.io/npm/mobx-restful-table\n[6]: https://github.com/idea2app/MobX-RESTful-table/actions/workflows/main.yml\n[7]: https://nodei.co/npm/mobx-restful-table/\n[8]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Translation.ts\n[9]: https://github.com/idea2app/Next-Bootstrap-TS/tree/main/translation\n[10]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Base.ts#L12-L24\n[11]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Repository.ts\n[12]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/pages/pagination.tsx\n[13]: https://next-bootstrap-ts.vercel.app/pagination/\n[14]: https://next-bootstrap-ts.vercel.app/scroll-list/\n[15]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/pages/scroll-list.tsx\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidea2app%2Fmobx-restful-table","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fidea2app%2Fmobx-restful-table","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fidea2app%2Fmobx-restful-table/lists"}