All Projects → bmihelac → ra-data-django-rest-framework

bmihelac / ra-data-django-rest-framework

Licence: MIT License
react-admin data provider for Django REST framework

Programming Languages

javascript
184084 projects - #8 most used programming language
python
139335 projects - #7 most used programming language
typescript
32286 projects
HTML
75241 projects

Projects that are alternatives of or similar to ra-data-django-rest-framework

react-ant-admin
此框架使用与二次开发,前端框架使用react,UI框架使用ant-design,全局数据状态管理使用redux,ajax使用库为axios。用于快速搭建中后台页面。
Stars: ✭ 52 (-3.7%)
Mutual labels:  react-admin
react-admin-amplify
AWS Amplify data provider for react-admin.
Stars: ✭ 130 (+140.74%)
Mutual labels:  react-admin
react-redux-admin-panel
React Redux Admin Panel
Stars: ✭ 16 (-70.37%)
Mutual labels:  react-admin
ra-input-markdown
A markdown editor for react-admin
Stars: ✭ 22 (-59.26%)
Mutual labels:  react-admin
express-crud-router
Simply expose resource CRUD (Create Read Update Delete) routes for Express & Sequelize. Compatible with React Admin Simple Rest Data Provider
Stars: ✭ 109 (+101.85%)
Mutual labels:  react-admin
loki-admin
Admin app build by KokiUI
Stars: ✭ 13 (-75.93%)
Mutual labels:  react-admin
ra-data-postgrest
react admin client for postgREST
Stars: ✭ 80 (+48.15%)
Mutual labels:  react-admin
tntweb-admin
react admin management system template
Stars: ✭ 25 (-53.7%)
Mutual labels:  react-admin
OpenAdmin-client-React
OpenAdmin client based on React v16.2.0
Stars: ✭ 17 (-68.52%)
Mutual labels:  react-admin
react-admin-json-view
JSON field and input for react-admin.
Stars: ✭ 28 (-48.15%)
Mutual labels:  react-admin
ra-data-prisma
Packages to connect react-admin with prisma version 2
Stars: ✭ 73 (+35.19%)
Mutual labels:  react-admin
ra-language-japanese
Japanese messages for react-admin
Stars: ✭ 22 (-59.26%)
Mutual labels:  react-admin
ant-back-server
🚀 react后台,后台管理系统——后端(Koa)实现
Stars: ✭ 26 (-51.85%)
Mutual labels:  react-admin
veact-admin
🔏 Admin client for surmon.me blog powered by React & @veactjs
Stars: ✭ 39 (-27.78%)
Mutual labels:  react-admin
ra-compact-ui
Enhanced components for popular framework react-admin. Helps reducing the styling boilerplate code and eases layout customizations.
Stars: ✭ 77 (+42.59%)
Mutual labels:  react-admin
react-admin-boilerplate
React-admin-boilerplate: react+antd+hook
Stars: ✭ 33 (-38.89%)
Mutual labels:  react-admin
amplify-material-ui
A Material-UI based implementation of aws amplify
Stars: ✭ 32 (-40.74%)
Mutual labels:  react-admin
ra-data-firebase-client
firebase data provider for react-admin framework
Stars: ✭ 54 (+0%)
Mutual labels:  react-admin
react-admin-nest
React和Ant Design和 Nest.js 和 Mysql 构建的后台通用管理系统。持续更新。
Stars: ✭ 123 (+127.78%)
Mutual labels:  react-admin
fastapi-starter
A FastAPI based low code starter: Async SQLAlchemy, Postgres, React-Admin, pytest and cypress
Stars: ✭ 97 (+79.63%)
Mutual labels:  react-admin

ra-data-django-rest-framework

react-admin data and authentication provider for Django REST framework.

Stable Release license CI codecov

ra-data-django-rest-framework includes backend and client example application and tests.

ra-data-django-rest-framework

Install

npm install ra-data-django-rest-framework

Usage

import drfProvider from 'ra-data-django-rest-framework';
const dataProvider = drfProvider("/api");

Features

  • Sorting
  • Pagination
  • Filtering
  • Authentication

Sorting

Ordering for OrderingFilter is supported.

Pagination

Currently pagination with PageNumberPagination is supported.

Default PageNumberPagination has page_size_query_param set to None, overide to be able to set Rows per page, ie:

from rest_framework.pagination import PageNumberPagination


class PageNumberWithPageSizePagination(PageNumberPagination):
    page_size_query_param = 'page_size'

Filtering

ra-data-django-rest-framework supports:

Authentication

tokenAuthProvider

tokenAuthProvider uses TokenAuthentication to obtain token from django-rest-framework. User token is saved in localStorage.

tokenAuthProvider accepts options as second argument with obtainAuthTokenUrl key. Default URL for obtaining a token is /api-token-auth/.

fetchJsonWithAuthToken overrides httpClient and adds authorization header with previously saved user token to every request.

import drfProvider, { tokenAuthProvider, fetchJsonWithAuthToken } from 'ra-data-django-rest-framework';

const authProvider = tokenAuthProvider()
const dataProvider = drfProvider("/api", fetchJsonWithAuthToken);

jwtTokenAuthProvider

jwtTokenAuthProvider uses JSON Web Token Authentication to obtain token from django-rest-framework. User token is saved in localStorage.

jwtTokenAuthProvider accepts options as second argument with obtainAuthJWTTokenUrl key. Default URL for obtaining a token is /api/token/.

fetchJsonWithAuthJWTToken overrides httpClient and adds authorization header with previously saved user token to every request.

import drfProvider, { jwtTokenAuthProvider, fetchJsonWithAuthJWTToken } from 'ra-data-django-rest-framework';

const authProvider = jwtTokenAuthProvider()
const dataProvider = drfProvider("/api", fetchJsonWithAuthJWTToken);

Example app

Django application with django-rest-framework

Setup virtual envirnoment, install requirements and load initial data:

cd example/backend
virtualenv .venv
source .venv/bin/activate
pip install -r requirements.txt
./manage.py migrate
./manage.py loaddata initial

Run server:

./manage.py runserver

Admin credentials in the example app are:

admin password

React-admin demo application

yarn install # install ra-data-django-rest-framework
cd example/client
yarn install
yarn start

You can now view example app in the browser: http://localhost:3000 Login with user admin, password is password or create new users in Django admin dashboard or shell.

By default the rest_framework.authentication.TokenAuthentication will be used. To use rest_framework_simplejwt.authentication.JWTAuthentication, set the value of the REACT_APP_USE_JWT_AUTH variable in the .env file (example/client/.env) to true, as shown below:

REACT_APP_USE_JWT_AUTH=true

Contributing

This project was bootstrapped with TSDX. All features that TSDX provides should work here too.

yarn start
yarn test

TODO

  • examples for image upload
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].