Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting data from TableRow component in Material UI

I'm using a Table component in the newest version of Material UI, and I'm not sure how I'm supposed to be acquiring data from a Table's row when it's selected.

The documentation mentions a prop for the Table component called onRowSelection, but it only gives you a RowNumber for the row that was selected, nothing else.

How are you supposed to make any use of this at all? I don't understand how you're meant to grab say...the key prop that's set to the TableRow using nothing but the RowNumber prop of that same TableRow.

Code below shows how I'm rendering the table itself, and assigning the key:

handleSelect(id) {
  console.log(id);
  this.props.dispatch({ type: 'SET_SELECTED_USER', user: id });
}

renderUsers() {
  if (this.props.users && this.props.currentUser) {
    const currUser = this.props.currentUser.username;
    const userList = this.props.users.map((user) => {
      if (currUser !== user.username) {
        return (
          <TableRow key={user._id}>
            <TableRowColumn>{user.username}</TableRowColumn>
            <TableRowColumn>{user.roles[0]}</TableRowColumn>
          </TableRow>
        );
      }
    });
    return userList;
  }
}

I just don't understand how the RowNumber of the row being selected is supposed to help me whatsoever, when I need to access they key of the row instead.

Any assistance would be really appreciated! Thanks!

Docs for Table: http://www.material-ui.com/#/components/table

like image 858
MisutoWolf Avatar asked May 18 '16 16:05

MisutoWolf


People also ask

How do you use a TableRow in flutter?

That's how to use the Table widget in Flutter. Basically, you need to create a list of TableRow and pass it as the children argument. You can also pass other arguments to customize the style of the Table .

Is material UI good for performance?

Material UI provides developers with material-based UI components. They help save some time on design and app development. But since Material UI is mostly a set of UI components, it doesn't offer such a great boost to the development speed as Bootstrap does.

How do you add a button to every row in a material UI table?

What you need to do is include a renderCell method in your columns array. In the above I am rendering a Button inside columns 5 and 6 which will appear on every populated row. Above that you can have a function which creates and returns a Button from Material-ui. This should be the default answer.


1 Answers

You could use the row number as an index in your users array (this.props.users):

handleSelect(userIndex) {
  const currUser = this.props.currentUser.username;
  const users = this.props.users.filter(user => user.username !== currUser)
  this.props.dispatch({ type: 'SET_SELECTED_USER', user: users[userIndex].id });
}
like image 179
omerts Avatar answered Oct 23 '22 19:10

omerts