[DataTable] Single row selection

[mstn]

I was wondering if it is possible to select only a single row in a data table or to attach click events to single rows.

EDIT I found a workaround, but perhaps this feature should be supported by the library. The trick is to enrich the object passed to rows parameter with a new field, let's say "actions", and to define a custom cellFormatter for field actions.

[tleunen]

I agree, I implemented it in our own library at work. But I'm not sure about it for MDL, I don't see it in the initial spec :/ (See https://material.google.com/components/data-tables.html#data-tables-specs)

Maybe you can ask the MDL team? https://github.com/google/material-design-lite It might just be something missing in the documentation.

But yes this can be done quite easily in react-mdl. I just don't want to do too many things that are not in the MD spec, or the MDL library.

[Augustin82]

Something I don't understand: if I add a 'className' attribute to each row of the rows object I pass to DataTable, the classes are added to the tr. However, it does not work that way with the 'style' attribute. This is obviously a problem when defining all your styles inline, instead of via external CSS.

I have added it myself as a quick'n'dirty hack, but I cannot use it if it's not in the official repo...

The change is on line 68 of react-mdl/src/DataTable/Table.js :

-- <tr key={row[rowKeyColumn] || row.key || idx} className={row.className}>
++ <tr key={row[rowKeyColumn] || row.key || idx} className={row.className} style={row.style}>

Is there a reason not to add this?

EDIT: went ahead and made a PR: https://github.com/tleunen/react-mdl/pull/398

[matthewsiemens]

Hey folks! I'm trying to do something very similar to what mstn was doing but I'm having a bit of trouble wrapping my head around it. Any chance either of you would be willing to provide some code examples of what this cellFormatter would look like and where to add it?

Thanks so much!

[mstn]

@matthewsiemens here you go some pseudocode. I didn't check it, but you should be able to find out the correct syntax easily.

const doEdit = (itemId) => {
   // do something
}

const renderEditAction = (action) => {
   return <IconButton name="edit" icon="edit" onClick={()=>doEdit(action.itemId)}/>
}

<DataTable rows={[
   { id: '1', description:'This is a description', action:{ type: 'edit', itemId: '1'} }
]}>
   <TableHeader name='description'>Description</TableHeader>
   <TableHeader name='action' cellFormatter={renderEditAction}>Edit</TableHeader>
</DataTable>

You can have also multiple actions per row. What I did in my project is to wrap the original DataTable inside a custom one that adds n actions to each row.

[matthewsiemens]

Hey Marco!

That's awesome, thanks so much for taking the time to respond!

--Matthew SiemensWebsite:http://matthewsiemens.com http://siemenstech.ca/Cell:(306) 202-6574

On 7 December 2016 at 11:06, Marco notifications@github.com wrote:

@matthewsiemens https://github.com/matthewsiemens here you go some pseudocode. I didn't check it, but you should be able to find out the correct syntax easily.

const doEdit = (itemId) => { // do something } const renderEditAction = (action) => { return <IconButton name="edit" icon="edit" onClick={()=>doEdit(action.itemId)}/> } <DataTable rows={[ { id: '1', description:'This is a description', action:{ type: 'edit', itemId: '1'} } ]}>

Description Edit You can have also multiple actions per row. What I did in my project is to wrap the original DataTable inside a custom one that adds n actions to each row. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub , or mute the thread .