Possibly change: Refactor DataTable about react-mdl HOT 22 CLOSED

Sure! Feel free to open a PR ;-)
But I'm not a big fan of having the end user writing something like this, because of the <tr>

<DataTable>
    <tr>
       <DataTableHeader />
    <tr>
    <tr>
       <DataTableCell />
    </tr>
</DataTable>

Maybe something like this would be better? <DataTable headers={headers} cells={cells} />?

from react-mdl.

Awesome. Will open one up.

I chose to to the tr way, because of a couple of reasons:

1. Now you can't add multiple rows in a thead, which is technically possible
2. I found that just before initiating the datatable i was mapping through my collection to make it confirm to the format of react-mdl, to then ship it off. The cognitive overhead of mapping it to a custom (although simple) structure was just a bit weird if I can also map it myself to well known structures like tr's, or a custom DataTableRow (although there would be no point for this one)

Number one could be solved by accepting either an array with items, or an array with arrays, enabling multiple rows.
Number two is just a preference. I don't know of any way to automate this without adding either a tr or a custom data structure.

Let me know what you think! I'll start with it tomorrow.

On 7 nov. 2015, at 18:01, Tommy [email protected] wrote:

Sure! Feel free to open a PR ;-)
But I'm not a big fan of having the end user writing something like this, because of the

Maybe something like this would be better? ?

—
Reply to this email directly or view it on GitHub.

from react-mdl.

We could probably support both ways

from react-mdl.

Been working on this a little bit, get stuck on something weird.

First: even though html supports multiple headers in a table, the mdl library doesn't, it ruins the layout, so I decided not to implement the multiple headers.

Only downside of my current implementation is that we can't have interactivity with the tr's in head and body, for example an onClick handler, but all other elements are at least available for interactivity.

Gist has been updated with current code: https://gist.github.com/janpieterz/6a74182debfaa61db7df

The problem I run into is the key property. Since I want to pass the whole component down, I require the key as a property on DataTableCell. If I name this 'name', require it and provide it, it works (although I can't set it on the cell itself). If I name it 'key' it says it is not provided, although it is, and the only change is key => name or name => key. Any ideas?

Warning in Demo is:
Warning: Failed propType: Required prop key was not specified in DataTableCell. Check the render method of Demo.

I can also create a pull request with this so it's easy for you to check if you're interested. Will dive deeper to see if I'm missing something.

from react-mdl.

It's because key is a reserved word in React. You cannot have a prop named key.

I looked at your gist, but I'm not sure to see what this way really gives more than the current way. I mean.. yeah.. by providing the component itself, a more customization is possible by the end user, but I'm not sure if it's really useful here

from react-mdl.

What it enabled me to do is have my own custom implementation of the checkbox'es so that I can easily interact with them, enabling things like the attached image.

Other things are for example in-table editing etc. The specs mention this, material-lite isn't there yet.
https://www.google.com/design/spec/components/data-tables.html#data-tables-interaction

from react-mdl.

Checkboxes will be deprecated in MDL 1.1 so yep we have to find a way to set this table more customizable :)
Too bad, I liked the way to populate a table using just simple datasets.

I'll think about it. Don't hesitate to continue what you have in mind as well.

from react-mdl.

hey @janpieterz, sorry for the delay.
I tought about it, and I think we could use both system.

We would have 2 ways of filling the table. The first one, the simple one, would take 2 props (headers and data), like what we currently have. The second one would take the children as data. Headers will stay as props.
That way, we keep the current system so we can ship this feature in v1.x.

The children (content) could be whatever the user want, either <tr><td>...or custom component he want so he can easily manage the events on the rows for example.

What do you think?

from react-mdl.

Sounds like a good idea! Will take some time to refactor my current code for this and am very busy this week, but am open to taking this on next week.

from react-mdl.

Please tell me, I use mdl-data-table - selectable, how do I subscribe to change events checkbox?

from react-mdl.

Currently, the only way is to bind the event on the checkboxes manually :/
If I were you, I won't use the selectable prop on the table because it will be removed in a future version of MDL, so by starting to manage it yourself it will be a lot easier :)

from react-mdl.

hey @janpieterz, still working on this?

from react-mdl.

I've let it sit for a little while, got massively busy with a project. Realistically I don't think I'll have time until January, and possibly even later.
My current progress is here:
https://github.com/janpieterz/react-mdl/tree/datatable-refac

from react-mdl.

+1 datatables with solid onchange events and cell customization (using components in cells) is essential for my projects

from react-mdl.

@FoxxMD about onchange event, I suggest you to do it yourself, adds a Checkbox in the cell instead of using the selectable property. I'll deprecate it soon since it's deprecated in MDL. About using components in cells, it's already possible.

Here's an example with an image:

<DataTable
    columns={[
        { name: 'picture', label: '' },
        { name: 'firstname', label: 'Firtname' },
        { name: 'lastname', label: 'Lastname' },
    ]}
    data={[
        { picture: <img src="http://placehold.it/100x100" />, firstname: 'John', lastname: 'Doe' },
        { picture: <img src="http://placehold.it/100x100" />, name: 'Jane', lastname: 'Doe' },
        { picture: <img src="http://placehold.it/100x100" />, name: 'Janie', lastname: 'Doe' }
    ]}
/>

@janpieterz The more I think about it and the more I find the current implementation acceptable. We might add a few other "properties" to the columns so that we could easily customize them (for example classNameand tooltip).
What do you think?

from react-mdl.

I pushed a new version of the datatable, and put an example with checkboxes on the website. Feel free to take look at it.

I'm closing this issue. I'm not sure a refactoring is needed to add features to it. Please reopen a new issue if you think more feature could be added.

from react-mdl.

@tleunen Thanks for the example! Interesting..

So if I wanted to use custom components I would do something like this?

const mappedColumns = this.props.data.map(function (entity) {
  return {
    customColumn1: <CustomComponent data={entity.column1Data} />,
    customColumn2: <SomeOtherComponent data={entity.column2Data} />
  };
}, this);

<DataTable
  columns{[
  { name: 'customColumn1', label: 'Column1'},
  { name: 'customColumn2', label: 'Column2'}
]}
  data = {mappedColumns} />

At first glance I can't see any downsides but I wonder how this approach would compare to the way react-bootstrap-table and griddle tackle formatting columns -- they take the approach of providing a callback for each column and supply the row/column data, expecting a component/jsx in return.

from react-mdl.

Yep, the example looks ok.
I also like the dataFormat function... This is something we could easily add in the column structure.

from react-mdl.

Ok I'm reopening the issue.. Indeed I think a refactoring using something similar to what we can find in react-bootstrap-table and fixed-data-table would be a good idea.

Feel free to work on something and open a PR if you want or come to discord to discuss about it :) I'm busy with some other things right now so I don't know when I'll be able to work on that.

from react-mdl.

The more I look at it the more I like the way it is done now actually. Since react-mdl allows custom components the only real difference between the way react-mdl does it and the way react-bootstrap-table does it is cosmetic (in that you have to use dataFormat to insert a component vs. mapping your data to the component and passing it to DataTable)

I think the only refactoring really needed is providing a react-mdl specific implementation for checkboxes/selecting rows.

from react-mdl.

yeah about that, I was thinking about adding back the selectable prop and handle the checkboxes like it is in the example.

I'll think more about it...

from react-mdl.

Closing in favor of #219

from react-mdl.