react-recrud v0.0.7
react-recrud
Table providing CRUD operations with RESTful API based on react-table
Installation
npm install react-recrud
Usage
Let's imagine that you have RESTful API server responding with following schema on GET
some /items
location
interface PaginatedResponse<T> {
results: T[]
params: {
pages: number
}
}
Also your server provides POST /items
for creating data, PATCH /items/:id
for updating data and DELETE /items/:id
for deleting items
Then you can use this package in your frontend
import axios from 'axios'
import React from 'react'
import { CrudTable, CrudApiClientProvider } from 'react-recrud'
import 'react-recrud/lib/style.css' // Insert this line to apply default styles
const api = axios.create({
baseURL: 'http://localhost:5000',
})
function getColumns() {
return [
{
Header: 'ID',
accessor: 'id',
hidden: true,
width: 70,
},
{
Header: 'Domain',
accessor: 'url',
disableSortBy: true,
},
{
Header: 'Comment',
accessor: 'comment',
editType: 'textarea',
},
{
Header: 'Type',
accessor: 'type',
editType: 'select',
editValues: [
{
text: 'type1',
value: 'type1',
},
{
text: 'type2',
value: 'type2',
},
],
},
]
}
function App() {
return (
<CrudApiClientProvider client={api}>
<CrudTable url="items/" columns={getColumns()} />
</CrudApiClientProvider>
)
}
export default App
Such widget will retrieve your data and automatically provide CRUD operations for /items
viewset
Contributing
This package is new and its functionality is not complete. So I'll be glad for any contribution. You may either resolve existing issues or suggest your own ideas - any kind of help will be useful for making this package better.
I will be especially glad if you are good in CSS styling or/and writing UI tests, because I'm not very good at it myself