mobx-restful-table

A Pagination Table & Scroll List component suite for CRUD operation, which is based on MobX RESTful & React.


Keywords
table, form, component, crud, mobx, restful, react
License
LGPL-3.0
Install
npm install mobx-restful-table@2.0.0-rc.0

Documentation

MobX RESTful table

A Pagination Table & Scroll List component suite for CRUD operation, which is based on MobX RESTful & React.

MobX compatibility NPM Dependency CI & CD

NPM

Versions

SemVer status ES decorator MobX
>=2 ✅developing stage-3 >=6.11
<2 ❌deprecated stage-2 >=4 <6.11

Components

  1. Image Preview
  2. File Preview
  3. File Picker
  4. File Uploader
  5. Form Field
  6. Range Input
  7. Badge Input
  8. REST Form
  9. Pager
  10. REST Table
  11. Scroll Boundary
  12. Scroll List

Installation

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

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES6",
    "moduleResolution": "Node",
    "useDefineForClassFields": true,
    "jsx": "react-jsx",
    "skipLibCheck": true,
    "lib": ["ES2023", "DOM"]
  }
}

Internationalization

  1. set up Text in UI
  2. import Text files

Data source

  1. set up HTTP client
  2. implement Model class

Initialization

Pagination Table

Inspired by Ant Design - Pro Table

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<Repository>[] {
    const { t } = i18n;

    return [
      {
        key: 'full_name',
        renderHead: t('repository_name'),
        renderBody: ({ html_url, full_name }) => (
          <a target="_blank" href={html_url}>
            {full_name}
          </a>
        ),
      },
      { key: 'homepage', type: 'url', renderHead: t('home_page') },
      { key: 'language', renderHead: t('programming_language') },
      {
        key: 'topics',
        renderHead: t('topic'),
        renderBody: ({ topics }) => (
          <>
            {topics?.map(topic => (
              <Badge
                key={topic}
                className="me-2"
                as="a"
                target="_blank"
                href={`https://github.com/topics/${topic}`}
              >
                {topic}
              </Badge>
            ))}
          </>
        ),
      },
      { key: 'stargazers_count', type: 'number', renderHead: t('star_count') },
    ];
  }

  render() {
    return (
      <Container style={{ height: '91vh' }}>
        <RestTable
          className="text-center"
          striped
          hover
          editable
          deletable
          columns={this.columns}
          store={repositoryStore}
          translator={i18n}
          onCheck={console.log}
        />
      </Container>
    );
  }
}

Scroll List

Preview Link

pages/scroll-list.tsx

Source Code

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(() => (
  <Container>
    <h1 className="my-4">{i18n.t('scroll_list')}</h1>

    {repositoryStore.downloading > 0 && <Loading />}

    <ScrollList
      translator={i18n}
      store={repositoryStore}
      renderList={allItems => (
        <Row as="ul" className="list-unstyled g-4" xs={1} sm={2}>
          {allItems.map(item => (
            <Col as="li" key={item.id}>
              <GitCard className="h-100 shadow-sm" {...item} />
            </Col>
          ))}
        </Row>
      )}
    />
  </Container>
));

export default ScrollListPage;

File Uploader

model/File.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

import { FileUploader } from 'mobx-restful-table';

import fileStore from '../model/File';

export const EditorPage = () => (
  <FileUploader
    store={fileStore}
    accept="image/*"
    name="images"
    multiple
    required
    onChange={console.log}
  />
);