Mui-datatables: Pass props to customToolbar

Created on 5 Mar 2019  路  6Comments  路  Source: gregnb/mui-datatables

I'd like to make my own custom filters, and the API is limiting.

Expected Behavior

Custom Components should get the same props that standard components get, such as tableRef. This way we can make our own Popovers and such.

Current Behavior

Custom Toolbar does not receive any props

Most helpful comment

I have a similar request. The customToolbar function currently allows you to add new icons/tools to the existing Toolbar. However, I need to style the existing Search and Filter icons into actual Buttons (not IconButtons) in addition to adding new tools. Is it possible to provide access to the functions that handle search, filter, and other default Toolbar tools to the customToolbar function? MUI-datatables currently passes specific parameters when building a customFooter, so I was hoping this might be viable for the customToolbar as well.

All 6 comments

Could you give an example of how you would change the API?

Generally, I highly recommend using this repo as a benchmark: https://github.com/react-bootstrap-table/react-bootstrap-table2. The api is really good. I can tell you a few things I would do differently now that I've used your repo for a few days:

  1. Rows should not be arrays, but objects, throughout callbacks. This way you don't have to do column index math in customBodyRender.
  2. Rows should be IDed, so as to avoid doing operations like customBodyRender: (cell, { rowIndex }) => { allData[rowIndex] }), which actually doesn't work the minute the table is sorted.
  3. Every way in which a cell value is used, columns should accept a transformation function (used in above repo as follows):
columns: [
{
   name: 'firstName',
   sortValue: (cell, row) => row.firstName.toLowerCase(),
   filterValue: (cell, row) => row.preferredName || row.firstName,
}
]
  1. Filters should be settable by column, rather than globally. Dropdowns don't work well for many columns.
  2. The SelectedToolbar and regular Toolbar render code looks something like:
//in render
{selectedRows.length ? selectedToolbar : Toolbar}

This is pretty needlessly opinionated. I forked the repo and added props to decide when to display. I very much want to be able to search while continuing to select.

  1. Finally, as it appears in this issue, any prop that _you_ use in source code should be passed to any _custom component_ a User wants to implement. This includes event in onRowSelect, and tableRef for customizing the Toolbar, etc. Please let me know if this makes sense

@nthgol Thanks for all the feedback. You're right, there are a lot of things that could be improved. It's been a learning process. Some of these items would be some big changes. I'm going to try to revisit and make some decisions when I get free time. I appreciate the time you spent writing that up

I have a similar request. The customToolbar function currently allows you to add new icons/tools to the existing Toolbar. However, I need to style the existing Search and Filter icons into actual Buttons (not IconButtons) in addition to adding new tools. Is it possible to provide access to the functions that handle search, filter, and other default Toolbar tools to the customToolbar function? MUI-datatables currently passes specific parameters when building a customFooter, so I was hoping this might be viable for the customToolbar as well.

I also would like to have the existing toolbar functionality + additional icons

I also need to handle native search from the customToolbar.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gangakrishh picture gangakrishh  路  3Comments

geekashu picture geekashu  路  3Comments

NickToye picture NickToye  路  4Comments

Andy1408 picture Andy1408  路  4Comments

pranavtheway picture pranavtheway  路  3Comments