MobX RESTful table

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

• 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
2. Image Preview
3. File Preview
4. File Picker
5. File Uploader
6. Form Field
7. Range Input
8. Badge Input
9. Array Field
10. REST Form
11. Pager
12. REST Table
13. Scroll Boundary
14. Scroll List
15. Searchable Input

Installation

npm i react \
  mobx \
  mobx-react \
  mobx-i18n \
  mobx-restful \
  mobx-restful-table
Copy

Configuration

index.html

<link rel="stylesheet" href="https://unpkg.com/bootstrap@5.3.8/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://unpkg.com/bootstrap-icons@1.13.1/font/bootstrap-icons.css" />
<link rel="stylesheet" href="https://unpkg.com/mobx-restful-table@2.6.2/dist/index.css" />
Copy

tsconfig.json

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

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

• Source Code
• Preview Link

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<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>
        ),
        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 }) => (
          <BadgeBar
            list={(topics || []).map(text => ({ 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 }) => (
          <p className="m-0 text-truncate" style={{ maxWidth: '10rem' }} title={description}>
            {description}
          </p>
        ),
      },
    ];
  }

  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>
    );
  }
}
Copy

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;
Copy

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();
Copy

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}
  />
);
Copy