Mui is a great React component library with awesome components.
One of the cool components is Β MUI Table that you may have used for all listing components especially when you are developing CRUD or back office applications.
But can't you see that it's annoying to repeat yourself writing the same code π with small changes on row actions and cellsΒ
You want one component that works for all cases and is fully flexible? The solution is here @fatehmoh/mui-awesome-table πΒ
- Fully customizable.Β
- Generic. You have to pass the type of your data list.
For instance
<MuiAwesomeTable<TODO> ...props />
for a list of TODOS - Strongly typed. full Typescript
- Allow Pagination, Sorting, Collapse features in a very easy and clean way.
- Pass actions props to build row actions
- Pass Cell props to define how to build your cells
Just pass the necessary props, the component will build the table for you and provide back sorting, pagination, actions events
Try it now, your feedbacks are very welcomed πΒ
npm i @fatehmoh/mui-awesome-table
OrΒ
yarn add @fatehmoh/mui-awesome-table
Here is a complete guid
// import the component and exported types that you need
import { MuiAwesomeTable, HeadCell, Action, Order } from '@fatehmoh/mui-awesome-table'
export Interface TODO {
name: string
status: 'pending' | 'done'
}
// Usually data came from an http call
const dummy_todos = [{name: 'todo1', status: 'pending'},{name: 'todo2', status: 'done'}]
export const TODOS = () => {
const [todos, setTodos] = useState(dummy_todos)
const [pagination, setPagination] = useState({
page: 0,
rowsPerPage: 25,
count: dummy_todos.length,
})
// Head Cells
const todoCells: HeadCell<TODO>[] = [
{
id: 'name',
label: 'Name',
render: (value) => value,
showOnCollapse: false,
},
{
id: 'status',
label: 'Status',
render: (value) => (<Chip color='success' icon={<PendingIcon/>} label={value} variant='outlined' />),
showOnCollapse: false,
}
]
// Row Actions
const todoActions:Action<TODO>[] = [
{
id: 'edit',
render: (todo: TODO) => (<MenuItem id='edit-menu-item' key={`edit-${todo.name}`} onClick={(e) => handleEdit(e, todo)}> <EditIcon/> Edit </MenuItem>)
},
{
id: 'remove',
render: (todo: TODO) => (<MenuItem id='remove-menu-item' key= {`remove-${todo.id}`} onClick={(e) => handleRemove(e, todo)}> <DeleteIcon /> Remove </MenuItem>)
},
]
// Trigger a new http call based on the following events
// [sort, page/rowsPerPage changes, row actions]
const onSortEvent = (sortBy: string, order: Order) => {
console.log(`${sortBy}-${order}`)
}
const pageChanged = (page: number) => {
setPagination({ ...pagination, page })
}
const rowsPerPageChanged = (rowsPerPage: number) => {
setPagination({ ...pagination, rowsPerPage, page: 0 })
}
const handleRemove = (e: React.MouseEvent<HTMLLIElement, MouseEvent>, todo: TODO) => console.log('REMOVE CALLED ON', todo)
const handleEdit = (e: React.MouseEvent<HTMLLIElement, MouseEvent>, todo: TODO) => console.log('EDIT CALLED ON', todo)
return (
<MuiAwesomeTable<TODO>
items={todos}
pagination={pagination}
headCells={todoCells}
actions={todoActions}
onPageChanged={(page: number) => pageChanged(page)}
onRowsPerPageChanged={(rowsPerPage: number) => rowsPerPageChanged(rowsPerPage)}
onSort={(sortBy: string,order: Order) => onSortEvent(sortBy, order)}
/>
)
}
Hope it's helpful. Search is the next feature to add ...
NPM library: https://www.npmjs.com/package/@fatehmoh/mui-awesome-table
Github Repo: https://github.com/fatehMohamed14/mui-awesome-table
Top comments (1)
Oh really? No image that illustrates your table and your code? Man, what is this? Oh really?