Comments (21)
Thanks... I was able to get the row information because my handleCustomRender has access to the data array. However, it would be far easier to directly have access to it in custom render.
This is the code
handleCustomRender(index, value, updateValue) {
// index of column that contains the database key data
const id_column_index = 0;
/// THIS IS MY HACK TO WORK AROUND NOT KNOWING THE INDEX
/// I pass the column in the fields of the data array
var cell_data = value.split('//**//');
var column = cell_data[0]; /// index of the column
var value = cell_data[1]; /// original value before hack
// in one case of using custom Render, it was using an index that was larger
// than size of the data. This next line was to protect from that.
if (this.state.data[index]) {
// Get the data from the row that contains the ID
id_column_value = this.state.data[index][id_column_index].split('//**//')[1];
}
return <Cell value={value} column={column} id_column_value={id_column_value} onUpdate={this.handleInlineUpdate} />
}
from mui-datatables.
I think I'm going to go with the following (and may actually start work on it today)
handleCustomRender(index, value, updateValueFn)
and that will change to:
handleCustomRender(value, tableMeta, updateValueFn)
tableMeta {
rowIndex,
columnIndex,
columnName,
rowData,
tableData,
tableState: { /* filter, sort, selected, state etc */ }
}
from mui-datatables.
I'll look into this might not be a bad idea to include the cell location
from mui-datatables.
Please :) Right now I have a nasty hack where I sneak the column through the data. But other that that, it works awesome.
from mui-datatables.
I'll look into this might not be a bad idea to include the cell location
So I was going to create a new issue thread but I think I can continue it here.. the customRender
function has a lot of short comings because in that context you have no access (that I can figure) to the rest of the table data.. or even just that own rows data! A minimal usecase:
- I display a list of data, only some rows of which 'belong' to the user.
- There is a column that displays 'edit' and 'delete' icons - by using
customRender
and returning the mui icon components - I want these icons to be grayed out on rows of data that do not belong to the current user.
- How?
Even if we had an 'isOwner' column or something.. I couldn't even check it given the current constraints (unless there is a part of the API I'm severely missing) -
One solution (the way an old library like datatables.net does it), is the render
method of the columns definition provides (data, type, row, meta)
where data
is the cell data, row
is the entire row data, and meta
is the index data (row and column index) as well as the column "settings" (mui-datatables
actually exposes column settings too.. you can get it from this
in your customRender
function context)
One way you could approach this is by exposing more data in the customRender
fn, but I'm not sure what is the best way. I mean you could just keep adding params (like col index vs row index.. and row data) but i don't know if that is best?
Maybe best is just to make 1 breaking change to organize the best way to expose the most data.
Edit: just to make it clear also, I'm willing to implement the feature as well, once it's decided the best way .. i'm not only here to complain :)
from mui-datatables.
@teadams @jkantr I'm open to feedback on how either of you envision some changes toe customRender() in terms of structure. Let's see some quick mockups. How would we structure the additional params?
The current version is in beta so I am fine with making the right breaking change to give everyone lots of flexibility going forward.
Current:
handleCustomRender(index, value, updateValue) {
Becomes this:
handleCustomRender(updateValueFn, data) {
and data is an object where we could list as mentioned above a structure like the following:
data = {
cellData,
rowData,
rowIndex,
columnIndex,
}
I'm not crazy for naming the parameter data
could use some help there. Thoughts? @jkantr I saw you had 'type' listed but what would that mean?
from mui-datatables.
Maybe the Column Options for that column?
- This would support the existing options that you have defined, plus any extra options the developer added.
- This will serve as a way to pass any column specific options to the customRender function. (parallels column options for the full row)
from mui-datatables.
I think data might be confused with the overall table data.
Some other ideas
cell_vars
cell_params
cell_vals
cell_attributes
cell_props
cell_state
vars
params
vals
attributes
from mui-datatables.
I guess this isn't a simple interface to design because the idea of a "custom" render is very general, but not very generalizable. Many cases it's just styling the data differently or only truncating it or wrapping it in some other tags or another component etc. But sometimes you're rending a custom column to have icons in it and no data, or an expandable button or something. Sometimes you want to have some sort of calculated data that's just a combination of data available elsewhere.
In theory all of this could be done when the data is being prepared to give to the component.. but there are advantages i think to having this behavior defined in the table (or column, in this case) as opposed to in the data transport interface. Especially in terms of rendering optimization.
One important thing to me is that the customRender
function should be able to do its job without lexical/external access to the table data. I think the only way to keep the API clean is to make sure the fn is encapsulated with all the data it needs (as is, at the time it's called).
So option 1 is we put the most common use cases first, which is cellData
(or cellValue
?) and then we combine the rest of the data by its relation to the cell, so context
(or related
?) which would be things like the rowData
, rowIndex
and columnIndex
... and then the meta
which are things like the settings/state for the column filter
, sort
, sortDirection
, display
(or visibility?) and name
. I believe this would cover most usecases I could think of... and at least by dividing them categorically we could expose something else later on without a breaking change.
I still have 1 other similar issue with accessing certain data from certain fields but I'll probably start another thread about it as i don't think it has anything to do directly with this fn's arguments.
from mui-datatables.
@jkantr Can you put together in one mock up function what you see for parameters and contents of any data objects
from mui-datatables.
I'm doing some work with this library, and I need the row data available to my custom render. Specifically, my custom render uses an onEdit for a button which needs to be called with the row ID.
I think this would be a good shape: customRender(value, updateValueFn, meta)
, where meta is
{
rowData,
tableData,
rowIndex,
columnIndex,
columnName,
tableState: { /* filter, sort, selected, state etc. */ }
}
The tableState stuff isn't particularly important to what I'm doing personally, I added that in based on @jkantr last post.
from mui-datatables.
Having it all together in one value doesn't feel great... but it's almost arbitrary to try to split it up. I would probably opt for customRender(value, data: { rowData, tableData }, meta: { rowIndex, columnIndex, columnName, tableState }, updateValueFn)
- probably only because having the 'callback' (or event trigger? w/e) function last seems more 'normal' to me.
But realistically I don't think any of this matters much. As long as the stuff is available and it's documented it's probably fine.
from mui-datatables.
The solution outlined above has been merged in and published. Would like some feedback when you guys can provide it. @jkeruzec helped on the docs
from mui-datatables.
it seems that nothing is rendered with the change..
I return either a String or a component but column is empty/not displayed at all.
With :
{
name: "Edit",
options: {
filter: false,
customRender: (value, tableMetadata, updateValueFn) => {
return <IconButton><EditIcon /></IconButton>;
}
}
}
from mui-datatables.
@jkeruzec Yeah, it's weird when running locally as dev it works fine but I see some issues on prod bundles. let me look into this
from mui-datatables.
@jkeruzec Which version are you running? Make sure it's the latest beta.
Take a look at this codesandbox I put up with the same example that is in examples/ looks good here
https://codesandbox.io/s/w7zm4zm0r5
from mui-datatables.
Ok my bad, I was providing an array with on data less than the number of column... !
Thanks anyway !
from mui-datatables.
Hi Greg,
When TableMeta.rowData is supposed to retrieve the full row data as an array. But as you can see in image below, rowData is only showing the value of the raw associated to the column (not the entire row as array). Could you please advise?
from mui-datatables.
@ivaqmo123 Having same issue, lemme know if you find a solution to it. Thanks
from mui-datatables.
I'm also seeing that tableMeta.tableData
is an empty list.
from mui-datatables.
Opened a new issue to address some of the issues with tableMeta
#901.
from mui-datatables.
Related Issues (20)
- how to customize the inbuilt filter function to Cascading Dropdown
- custom filter, removed chip provide wrong `filterPos` when its value is 0 HOT 1
- An option to modify delete icon?
- Pagination Rows per Page resetting itself after clicking on custom button in column HOT 6
- Column Drag not working HOT 3
- in customHeadRender only 1 column needs to sort and not remaining elements HOT 1
- Link on github front page is malicious HOT 1
- Not wroking
- muidatatable scroll bar reset
- Not able to hide expander icon from specific rows
- Why are all the examples broken? HOT 1
- Print only appeared content rows with tableBodyMaxHeight applied
- Twitching while dragging columns
- Bad typing on MUIDataTableOptions renderExpandableRow - rowData
- Responsivenes Stacked not working
- setCellProps and setCellHeaderProps not working in mobile
- Customizing the contents of a chip label
- Cant search data with children having array of objects
- how to filter an date column by month
- States are not updating in customBodyRender
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from mui-datatables.