Material-table: Link as cell data

[jatinvmehta]

In our requirement, we have to display list of titles in one of the column. Each title should be a link and on hover over we need to display modal which display details about each title. How can i achieve this ?

[mbrn]

Hi @jatinvmehta ,

I think that you can use custom render feature to achive this case. Look at example.

https://mbrn.github.io/material-table/#/docz-examples-07-example-custom-render

If it works, why you dont ask this question on Stackoverflow with material-table tag? This would be helpful for other developers :)

[jatinvmehta]

Will try that. Can i put any component inside that render method ? like link or button

[mbrn]

Of course. It gives you rowdata and expect a component to draw

[revskill10]

@mbrn In case of using Link (or custom React component), grouping doesn't work.

[mbrn]

I will find a solution to this case @revskill10

[kkomaz]

@mbrn

Instead of avatar like the example if we hook a component inside with a onClick or onChange function? How do we stop the propagation if we utilize a onRowClick on the <MaterialTable /> component? Both events are triggering.. I tried deep diving into the code base and it looks like I can add a onClick to the Cell component but I only want to do it only on ONE column

[kkomaz]

Example: (custom render checkbox)

      columns: [
        {
          field: 'check',
          editable: 'never',
          cellStyle: {
            padding: 'inherit',
            width: '5%',
          },
          render: data => (
            <Checkbox
              disabled={data && data.tableData.editing === 'update'}
              checked={_.get(data, 'check', false)}
              value={_.get(data, 'check', false)}
              onChange={e => this.handleChange(e, data.tableData.id)} //deals with check mark
            />
          )
        },

[kkomaz]

Nevermind figured it out via disableClick: true on the column!

[xStorm111]

I will find a solution to this case @revskill10

Have you found a solution for this @mbrn ?