Here is an awesome generic table component library for MUI React users 👍

#react #mui #material #table

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)}
    />
   )
}