https://github.com/idea2app/mobx-restful-table
A super Table component suite for CRUD operation, which is based on MobX RESTful & React. Just define your Data structures & API routes, administrator pages will be built in minutes.
https://github.com/idea2app/mobx-restful-table
component crud mobx react restful table
Last synced: 7 months ago
JSON representation
A super Table component suite for CRUD operation, which is based on MobX RESTful & React. Just define your Data structures & API routes, administrator pages will be built in minutes.
- Host: GitHub
- URL: https://github.com/idea2app/mobx-restful-table
- Owner: idea2app
- License: lgpl-3.0
- Created: 2022-12-04T19:48:28.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2024-09-03T19:24:38.000Z (over 1 year ago)
- Last Synced: 2024-11-20T17:49:24.108Z (about 1 year ago)
- Topics: component, crud, mobx, react, restful, table
- Language: TypeScript
- Homepage: https://idea2app.github.io/MobX-RESTful-table/
- Size: 256 KB
- Stars: 3
- Watchers: 3
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: ReadMe.md
Awesome Lists containing this project
README
# MobX RESTful table
A **Pagination Table** & **Scroll List** component suite for [CRUD operation][1], which is based on [MobX RESTful][2] & [React][3].
[][4]
[][5]
[][6]
[][7]
- API document: https://idea2app.github.io/MobX-RESTful-table/
- Preview site: https://idea2app.github.io/MobX-RESTful-table/preview/
## Versions
| SemVer | status | ES decorator | MobX |
| :----: | :----------: | :----------: | :---------: |
| `>=2` | ✅developing | stage-3 | `>=6.11` |
| `<2` | ❌deprecated | stage-2 | `>=4 <6.11` |
## Components
1. [Badge Bar](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeBar.html)
2. [Image Preview](https://idea2app.github.io/MobX-RESTful-table/classes/ImagePreview.html)
3. [File Preview](https://idea2app.github.io/MobX-RESTful-table/functions/FilePreview-1.html)
4. [File Picker](https://idea2app.github.io/MobX-RESTful-table/classes/FilePicker.html)
5. [File Uploader](https://idea2app.github.io/MobX-RESTful-table/classes/FileUploader.html)
6. [Form Field](https://idea2app.github.io/MobX-RESTful-table/functions/FormField-1.html)
7. [Range Input](https://idea2app.github.io/MobX-RESTful-table/classes/RangeInput.html)
8. [Badge Input](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeInput.html)
9. [Array Field](https://idea2app.github.io/MobX-RESTful-table/classes/ArrayField.html)
10. [REST Form](https://idea2app.github.io/MobX-RESTful-table/classes/RestForm.html)
11. [Pager](https://idea2app.github.io/MobX-RESTful-table/functions/Pager-1.html)
12. [REST Table](https://idea2app.github.io/MobX-RESTful-table/classes/RestTable.html)
13. [Scroll Boundary](https://idea2app.github.io/MobX-RESTful-table/functions/ScrollBoundary-1.html)
14. [Scroll List](https://idea2app.github.io/MobX-RESTful-table/classes/ScrollList.html)
15. [Searchable Input](https://idea2app.github.io/MobX-RESTful-table/classes/SearchableInput.html)
## Installation
```shell
npm i react \
mobx \
mobx-react \
mobx-i18n \
mobx-restful \
mobx-restful-table
```
## Configuration
### `tsconfig.json`
```json
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"moduleResolution": "Node",
"useDefineForClassFields": true,
"jsx": "react-jsx",
"skipLibCheck": true,
"lib": ["ES2023", "DOM"]
}
}
```
### Internationalization
1. [set up Text in UI][8]
2. [import Text files][9]
### Data source
1. [set up HTTP client][10]
2. [implement Model class][11]
## Initialization
### Pagination Table
Inspired by [Ant Design - Pro Table](https://procomponents.ant.design/components/table)
- [Source Code][12]
- [Preview Link][13]
```tsx
import { computed } from 'mobx';
import { observer } from 'mobx-react';
import { Component } from 'react';
import { Container, Button, Badge } from 'react-bootstrap';
import { BadgeBar, Column, RestTable } from 'mobx-restful-table';
import repositoryStore, { Repository } from '../models/Repository';
import { i18n } from '../models/Translation';
@observer
export default class PaginationPage extends Component {
@computed
get columns(): Column[] {
const { t } = i18n;
return [
{
key: 'full_name',
renderHead: t('repository_name'),
renderBody: ({ html_url, full_name }) => (
{full_name}
),
required: true,
minLength: 3,
invalidMessage: 'Input 3 characters at least',
},
{ key: 'homepage', type: 'url', renderHead: t('home_page') },
{ key: 'language', renderHead: t('programming_language') },
{
key: 'topics',
renderHead: t('topic'),
renderBody: ({ topics }) => (
({ text, link: `https://github.com/topics/${text}` }))}
/>
),
},
{ key: 'stargazers_count', type: 'number', renderHead: t('star_count') },
{
key: 'description',
renderHead: t('description'),
contentEditable: true,
renderBody: ({ description }) => (
{description}
),
},
];
}
render() {
return (
);
}
}
```
### Scroll List
[Preview Link][14]
#### `pages/scroll-list.tsx`
[Source Code][15]
```tsx
import { observer } from 'mobx-react';
import { FC } from 'react';
import { Container, Row, Col } from 'react-bootstrap';
import { Loading } from 'idea-react';
import { ScrollList } from 'mobx-restful-table';
import { GitCard } from '../components/Git';
import repositoryStore from '../models/Repository';
import { i18n } from '../models/Translation';
const ScrollListPage: FC = observer(() => (
{i18n.t('scroll_list')}
{repositoryStore.downloading > 0 && }
(
{allItems.map(item => (
))}
)}
/>
));
export default ScrollListPage;
```
### File Uploader
#### `model/File.ts`
```ts
import { toggle } from 'mobx-restful';
import { FileModel } from 'mobx-restful-table';
import { uploadFile } from '../utility';
export class AssetFileModel extends FileModel {
@toggle('uploading')
async upload(file: File) {
const URI = await uploadFile(file);
return super.upload(URI);
}
}
export default new AssetFileModel();
```
#### `page/editor.tsx`
```tsx
import { FileUploader } from 'mobx-restful-table';
import fileStore from '../model/File';
export const EditorPage = () => (
);
```
[1]: https://en.wikipedia.org/wiki/Create,_read,_update_and_delete
[2]: https://github.com/idea2app/MobX-RESTful
[3]: https://reactjs.org/
[4]: https://mobx.js.org/
[5]: https://libraries.io/npm/mobx-restful-table
[6]: https://github.com/idea2app/MobX-RESTful-table/actions/workflows/main.yml
[7]: https://nodei.co/npm/mobx-restful-table/
[8]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Translation.ts
[9]: https://github.com/idea2app/Next-Bootstrap-TS/tree/main/translation
[10]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Base.ts#L12-L24
[11]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/models/Repository.ts
[12]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/pages/pagination.tsx
[13]: https://next-bootstrap-ts.vercel.app/pagination/
[14]: https://next-bootstrap-ts.vercel.app/scroll-list/
[15]: https://github.com/idea2app/Next-Bootstrap-TS/blob/main/pages/scroll-list.tsx