Here is an awesome generic table component library for MUI React users 👍
Tags: react, mui, material, table
Published: 2023-02-09 07:41:37

Mui is a great React component library with awesome components.
One of the cool components is  [MUI Table](https://mui.com/material-ui/react-table/#collapsible-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](https://www.npmjs.com/package/@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

```jsx
// 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