Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 2 years ago)
- Default Branch: master
- Last Pushed: 2024-09-03T19:24:38.000Z (4 months ago)
- Last Synced: 2024-11-20T17:49:24.108Z (about 1 month 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]
## Versions
| SemVer | status | ES decorator | MobX |
| :----: | :----------: | :----------: | :---------: |
| `>=2` | ✅developing | stage-3 | `>=6.11` |
| `<2` | ❌deprecated | stage-2 | `>=4 <6.11` |
## Components
1. [Image Preview](https://idea2app.github.io/MobX-RESTful-table/classes/ImagePreview.html)
2. [File Preview](https://idea2app.github.io/MobX-RESTful-table/functions/FilePreview-1.html)
3. [File Picker](https://idea2app.github.io/MobX-RESTful-table/classes/FilePicker.html)
4. [File Uploader](https://idea2app.github.io/MobX-RESTful-table/classes/FileUploader.html)
5. [Form Field](https://idea2app.github.io/MobX-RESTful-table/functions/FormField-1.html)
6. [Range Input](https://idea2app.github.io/MobX-RESTful-table/classes/RangeInput.html)
7. [Badge Input](https://idea2app.github.io/MobX-RESTful-table/classes/BadgeInput.html)
8. [REST Form](https://idea2app.github.io/MobX-RESTful-table/classes/RestForm.html)
9. [Pager](https://idea2app.github.io/MobX-RESTful-table/functions/Pager-1.html)
10. [REST Table](https://idea2app.github.io/MobX-RESTful-table/classes/RestTable.html)
11. [Scroll Boundary](https://idea2app.github.io/MobX-RESTful-table/functions/ScrollBoundary-1.html)
12. [Scroll List](https://idea2app.github.io/MobX-RESTful-table/classes/ScrollList.html)
## Installation
```shell
npm i react \
mobx \
mobx-react \
mobx-i18n \
mobx-restful \
mobx-restful-table
```
> Some **Node.js** tips about the upstream `mobx-restful` you should know:
> https://github.com/idea2app/MobX-RESTful?tab=readme-ov-file#usage
## 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 { PureComponent } from 'react';
import { Container, Button, Badge } from 'react-bootstrap';
import { Column, RestTable } from 'mobx-restful-table';
import repositoryStore, { Repository } from '../models/Repository';
import { i18n } from '../models/Translation';
@observer
export default class PaginationPage extends PureComponent {
@computed
get columns(): Column[] {
const { t } = i18n;
return [
{
key: 'full_name',
renderHead: t('repository_name'),
renderBody: ({ html_url, full_name }) => (
{full_name}
),
},
{ key: 'homepage', type: 'url', renderHead: t('home_page') },
{ key: 'language', renderHead: t('programming_language') },
{
key: 'topics',
renderHead: t('topic'),
renderBody: ({ topics }) => (
<>
{topics?.map(topic => (
{topic}
))}
>
),
},
{ key: 'stargazers_count', type: 'number', renderHead: t('star_count') },
];
}
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