DEV Community

Cover image for Here is an awesome generic table component library for MUI React users πŸ‘
Fateh Mohamed 🐒
Fateh Mohamed 🐒

Posted on

Here is an awesome generic table component library for MUI React users πŸ‘

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 πŸŽ‰Β 

  1. Fully customizable.Β 
  2. Generic. You have to pass the type of your data list. For instance <MuiAwesomeTable<TODO> ...props /> for a list of TODOS
  3. Strongly typed. full Typescript
  4. Allow Pagination, Sorting, Collapse features in a very easy and clean way.
  5. Pass actions props to build row actions
  6. 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)}
    />
   )
}
Enter fullscreen mode Exit fullscreen mode

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 (0)