R2D2 - Antd DataTable
full option datatable for react application. it's good to use when you need to develope with limit time
General info
This project is using antd react ui framework.
Features
- View Table With Basic Pagination Params Fetching (Current_Page, All_Page, Page_Size)
- Action Customization feature : Edit, Delete, Change Status whatever can pass as function
- Filter with Column Parameter and Filter on Header Table (Fetch API with query parameter)
- Row Expandable
- Multiple Selection
- Can integrate with i18n
Installation
npm i r2d2table --save --registry http://34.87.107.88:4873Example Usage
import React, { useEffect, useState, useCallback } from 'react'
import { C3POTable } from 'r2d2'
import { useStore } from '../store/mobx' // using store for i18n
import { observer } from 'mobx-react'
import { Header } from '../Components/Header'
import { useTranslation } from 'react-i18next'
import { Descriptions, Row, Col, Button, Select } from 'antd'
import axios from 'axios'
import { JsonForms } from '@jsonforms/react'
import { materialCells, materialRenderers } from '@jsonforms/material-renderers'
import ApprovalCIschema from '../JSONforms/CIchema/CIapprovalSchema.json'
import ApprovalUIschema from '../JSONforms/UIschema/UIapprovalSchema.json'
import ChangeStatusSchema from '../JSONforms/UIschema/UichangeStatus.json'
import { statusTester, StatusForm } from '../JSONforms/Renderer/status/status'
import {
SaveOutlined,
DeleteOutlined,
CalendarOutlined
} from '@ant-design/icons'
import { toJS } from 'mobx'
import dayjs from 'dayjs'
const statusItems = [
{
status: 'PENDING',
key: 'PENDING2',
color: '#FFF2CC'
},
{
status: 'APPROVED',
key: 'APPROVED2',
color: '#C6E0B4'
},
{
status: 'REJECTED',
key: 'REJECTED2',
color: '#F4B084'
},
{
status: 'RECHECK',
key: 'RECHECK2',
color: 'orange'
},
{
status: 'ERROR',
key: 'ERROR2',
color: '#D9D9D9'
}
]
const mapColorWithStatus = (_status) => {
let result = statusItems.find(({ status }) => status === _status)
return result.color
}
const ApprovalPage = observer(() => {
const { localeStore } = useStore()
const { t } = useTranslation()
const ChangeStatus = ({ mode, key, close, saveHandler, getHandler }) => {
const [recordUpdate, setRecordUpdate] = useState({})
const [recordShow, setRecordShow] = useState({})
const [isDone, setIsDone] = useState(false)
const FetchData = useCallback(async () => {
let _record = await getHandler(key)
let { book_title, book_status, ...rest } = _record[0]
setRecordUpdate({
book_title,
book_status
})
setRecordShow({ ...rest })
setIsDone(true)
}, [getHandler, key])
const renderers = [
...materialRenderers,
{ tester: statusTester, renderer: StatusForm }
]
useEffect(() => {
FetchData()
}, [FetchData])
return (
isDone && (
<div>
<Descriptions
bordered
key={'isbn'}
column={2}
size={'small'}
style={{ paddingBlock: '18px' }}
>
<Descriptions.Item
bordered
label={t('book_name')}
key={key}
labelStyle={{ fontWeight: '600' }}
span={1}
style={{
border: '1px solid lightgray',
borderSpacing: '1px 1px'
}}
>
{t(recordShow['book_name'])}
</Descriptions.Item>
<Descriptions.Item
bordered
label={t('author_signature')}
key={key}
labelStyle={{ fontWeight: '600' }}
span={1}
style={{
border: '1px solid lightgray',
borderSpacing: '1px 1px'
}}
>
{t(recordShow['author_signature'])}
</Descriptions.Item>
</Descriptions>
<JsonForms
schema={ApprovalCIschema}
uischema={ChangeStatusSchema}
data={recordUpdate}
renderers={renderers}
cells={materialCells}
onChange={({ errors, data }) => setRecordUpdate(data)}
/>
<Row justify={'end'} style={{ paddingTop: '18px' }}>
<Col style={{ marginRight: '18px' }}>
<Button htmlType='button' onClick={close}>
{' '}
{t('Cancel')}
</Button>
</Col>
<Col>
<Button
type='primary'
onClick={() => console.log({ ...recordShow, ...recordUpdate })}
icon={<SaveOutlined />}
>
{' '}
{t('Save')}{' '}
</Button>
</Col>
</Row>
</div>
)
)
}
const Edit = ({ mode, key, close, saveHandler, getHandler }) => {
const [recordUpdate, setRecordUpdate] = useState({})
const [recordShow, setRecordShow] = useState({})
const [isDone, setIsDone] = useState(false)
const FetchData = useCallback(async () => {
let _record = await getHandler(key)
let {
book_title,
book_name,
author_prices_request,
book_status,
book_payload,
active_flag,
...rest
} = _record[0]
setRecordUpdate({
book_title,
book_name,
author_prices_request,
book_status
})
setRecordShow({ ...rest })
setIsDone(true)
}, [getHandler, key])
const renderers = [
...materialRenderers,
//register custom renderers
{ tester: statusTester, renderer: StatusForm }
]
const ShowData = React.useMemo(
() => (
<Descriptions
bordered
key={'isbn'}
column={2}
size={'small'}
style={{ paddingBlock: '18px' }}
>
{Object.keys(recordShow).map(function (key) {
return (
<Descriptions.Item
bordered
label={t(key)}
key={key}
labelStyle={{ fontWeight: '600' }}
span={1}
style={{
border: '1px solid lightgray',
borderSpacing: '1px 1px'
}}
>
{t(recordShow[key].toString())}
</Descriptions.Item>
)
})}
</Descriptions>
),
[recordShow]
)
useEffect(() => {
FetchData()
}, [FetchData])
return (
isDone && (
<div>
{ShowData}
<JsonForms
schema={ApprovalCIschema}
uischema={ApprovalUIschema}
data={recordUpdate}
renderers={renderers}
cells={materialCells}
onChange={({ errors, data }) => setRecordUpdate(data)}
/>
<Row justify={'end'} align={'bottom'} style={{ paddingTop: '18px' }}>
<Col style={{ marginRight: '18px' }}>
<Button htmlType='button' onClick={close}>
{' '}
{t('Cancel')}
</Button>
</Col>
<Col>
<Button
type='primary'
onClick={() => saveHandler({ ...recordUpdate, ...recordShow })}
icon={<SaveOutlined />}
>
{' '}
{t('Save')}{' '}
</Button>
</Col>
</Row>
</div>
)
)
}
const Delete = ({ mode, key, close, saveHandler, getHandler }) => {
const [recordUpdate, setRecordUpdate] = useState({})
const [isDone, setIsDone] = useState(false)
const FetchData = useCallback(async () => {
let _record = await getHandler(key)
let { active_flag, ...rest } = _record[0]
// Set Active Flag to "N"
setRecordUpdate({ active_flag: 'N', ...rest })
setIsDone(true)
}, [getHandler, key])
const ShowData = () => (
<Descriptions
bordered
key={'isbn'}
column={2}
size={'small'}
style={{ paddingBlock: '18px' }}
>
<Descriptions.Item
bordered
label={t('book_name')}
key={key}
labelStyle={{ fontWeight: '600' }}
span={1}
style={{
border: '1px solid lightgray',
borderSpacing: '1px 1px'
}}
>
{t(recordUpdate['book_name'])}
</Descriptions.Item>
<Descriptions.Item
bordered
label={t('author_signature')}
key={key}
labelStyle={{ fontWeight: '600' }}
span={1}
style={{
border: '1px solid lightgray',
borderSpacing: '1px 1px'
}}
>
{t(recordUpdate['author_signature'])}
</Descriptions.Item>
</Descriptions>
)
useEffect(() => {
FetchData()
}, [FetchData])
return (
isDone && (
<>
<Row justify={'center'}>
<Col>
<h2>{t('Would you like really delete this record ?')}</h2>
</Col>
</Row>
<ShowData />
<Row justify={'end'} align={'bottom'}>
<Col style={{ marginRight: '18px' }}>
<Button htmlType='button' onClick={close}>
{' '}
{t('Cancel')}
</Button>
</Col>
<Col>
<Button
type='danger'
onClick={() => saveHandler({ ...recordUpdate })}
icon={<DeleteOutlined />}
>
{' '}
{t('Delete')}{' '}
</Button>
</Col>
</Row>
</>
)
)
}
const approvalBooksColumn = [
{
title: t('ISBN'),
dataIndex: 'isbn',
key: 'isbn',
search_params: 'isbn'
},
{
title: t('Author ID'),
dataIndex: 'author_id',
key: 'author_id',
search_params: 'author_id'
},
{
title: t('Author Signature'),
dataIndex: 'author_signature',
key: 'author_signature',
search_params: 'author_signature'
},
{
title: t('Book Title'),
dataIndex: 'book_title',
key: 'book_title',
search_params: 'book_title'
},
{
title: t('Date of Request'),
dataIndex: 'date_of_request',
key: 'date_of_request',
search_params: 'date_of_request'
},
{
title: t('Status'),
dataIndex: 'book_status',
key: 'book_status',
align: 'center',
render: (record) => (
<div style={{ display: 'flex', justifyContent: 'center' }}>
<div
style={{
fontWeight: '400',
backgroundColor: mapColorWithStatus(record),
width: '90%',
paddingInline: '20px',
display: 'flex',
justifySelf: 'center',
justifyContent: 'center',
border: '1px dashed black',
borderRadius: '8px'
}}
>
{t(record)}
</div>
</div>
)
},
{
title: t('Options'),
width: '120px',
action: [
{
type: 'read',
text: t('Read'),
view: 'modal',
title: 'Read Book',
width: '70%'
},
{
type: 'update-status',
text: t('Change Status'),
view: 'modal',
component: <ChangeStatus mode={'update-status'} />,
title: t('Update Book Status'),
width: '40%'
},
{
type: 'edit',
text: t('Edit'),
view: 'modal',
component: <Edit mode={'edit'} />,
title: t('Edit Book Information'),
width: '70%'
},
{
type: 'delete',
text: t('Delete'),
view: 'modal',
component: <Delete mode={'delete'} />,
title: t('Delete Book Record')
}
]
}
]
const approvalBooksExpandable = [
{
title: t('Book Name'),
dataIndex: 'book_name',
key: 'book_name',
span: 4
},
{
title: t('Author Name'),
dataIndex: 'author_name',
key: 'author_name'
},
{
title: t('Customer ID'),
dataIndex: 'customer_id',
key: 'customer_id'
},
{
title: t('Create Date'),
dataIndex: 'create_date',
key: 'create_date'
},
{
title: t('Create By'),
dataIndex: 'create_by',
key: 'create_by'
},
{
title: t('Update Date'),
dataIndex: 'update_date',
key: 'update_date'
},
{
title: t('Update By'),
dataIndex: 'update_by',
key: 'update_by'
}
]
const fetchBookRequest = async (
cur_pages = 1,
per_pages = 10,
params = {}
) => {
let totalPage
let totalItems
let { data } = await axios.get(`http://localhost:4444/books_request`, {
params: {
_page: cur_pages,
_limit: per_pages,
...params
}
})
if (Object.keys(params).length === 0) {
let { data: totalData } = await axios.get(
`http://localhost:4444/books_request`
)
totalPage = Math.ceil(totalData.length / per_pages)
totalItems = totalData.length
} else {
let { data: paramTotal } = await axios.get(
`http://localhost:4444/books_request`,
{
params: {
...params
}
}
)
totalPage = Math.ceil(paramTotal.length / per_pages)
totalItems = paramTotal.length
}
return {
total_items: totalItems,
total_pages: totalPage,
per_pages: per_pages,
cur_pages: cur_pages,
data: data
}
}
const getRecordHandler = async (key) => {
let { data } = await axios.get(`http://localhost:4444/books_request`, {
params: {
isbn: key
}
})
return data
}
const changeStatusHandler = async (record) => {
console.log('changeStatusHandler')
console.log(record)
return record
}
const updateRecordHandler = async (record) => {
console.log('updateRecordHandler')
console.log(record)
return record
}
const deleteRecordHandler = async (record) => {
console.log('updateRecordHandler')
console.log(record)
return record
}
const bulkActionHandler = async (records, action) => {
console.log('bulkActionHandler')
console.log(action)
console.log(toJS(records))
return records
}
const StatusPicker = ({ saveHandler, onUpdateValue = null, onClear }) => {
return (
<Select
key={'SelectStatus'}
style={{ width: '180px' }}
value={onUpdateValue}
onChange={(val) => saveHandler(val)}
placeholder={t('Select a Status')}
onClear={onClear}
allowClear
>
{statusItems.map((e, i) => (
<Select.Option value={e.status} key={e.status + i}>
{t(e.status)}
</Select.Option>
))}
</Select>
)
}
// ###
return (
<React.Fragment>
<Header data={<h1>APPROVAL TABLE</h1>} />
<C3POTable
lang={localeStore.language}
fetchData={fetchBookRequest}
columns={approvalBooksColumn}
expandableRows={approvalBooksExpandable}
perPage={10}
rowKey={'isbn'}
scrollAuto
bordered
rowSelect={true}
tableLayout={'fixed'}
actionComponent={'dropdown'}
dropdownText={'Actions'}
primaryKey={(record) => {
const { isbn } = record
return isbn
}}
bulkAction={{
ButtonName: t('Bulk Action'),
options: [
{
value: 'update-status',
label: t('Change Status'),
icon: SaveOutlined,
disabled: false
},
{
value: 'delete',
label: t('Delete'),
icon: DeleteOutlined,
disabled: false
}
]
}}
// queryHeader type: options / datepicker / button
queryHeader={[
{
type: 'button',
label: t('Today Request'),
queryParams: { date_of_request: dayjs().format('YYYY-MM-DD') },
icon: CalendarOutlined
},
{
type: 'options',
component: StatusPicker,
label: t('book_status'),
params: 'book_status',
key: 'book_status'
},
]}
statusRecord={changeStatusHandler}
getRecord={getRecordHandler}
updateRecord={updateRecordHandler}
readRecord={changeStatusHandler}
deleteRecord={deleteRecordHandler}
bulkActionRecord={bulkActionHandler}
/>
</React.Fragment>
)
})
export default ApprovalPageAPI
- coming soon
To-DO-List
- Header Filter with Date Filter
License
MIT © anakin