React material ui table can't get element from row

Asked by Mina Cline on
Tags: element react
8 Answers

Answer by Vicente Mendoza

Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers ,I want to use a table from the material ui library for react : http://www.material-ui.com/#/components/table,My first answer on StackOverflow ... hope it helps :-)

onRowSelection is a property of <Table> not <TableRow>. Also, it doesn't call the handler with an event when called (e), rather, it will call it with the key. You can then use that to find the row. Like so:

_onRowSelection(key) {
  console.log(key, this.state.data[key])
},

getInitialState() {
  return {
    data : [{id:0,name:"joe"},{id:1,name:"john"},{id:2,name:"Brad"},{id:3,name:"Jack"},{id:4,name:"Andrew"}],
    fixedHeader: true,
    fixedFooter: true,
    stripedRows: false,
    showRowHover: true,
    selectable: true,
    multiSelectable: false,
    enableSelectAll: false,
    deselectOnClickaway: true,
    height: '300px',
  };
},

render() {
  return (
    <div>
      <div className="col-sm-6">
        <h1>MagicTableReact</h1>
        <Table
          height={this.state.height}
          fixedHeader={this.state.fixedHeader}
          fixedFooter={this.state.fixedFooter}
          selectable={this.state.selectable}
          multiSelectable={this.state.multiSelectable}
          onRowSelection={this._onRowSelection}
        >
          <TableHeader>
            <TableRow>
              <TableHeaderColumn>ID</TableHeaderColumn>
              <TableHeaderColumn>Name</TableHeaderColumn>
            </TableRow>
          </TableHeader>
          <TableBody
          >
            {this.state.data.map((user, i) =>
              <TableRow key={i} value={user}>
                <TableRowColumn>{user.id}</TableRowColumn>
                <TableRowColumn>{user.name}</TableRowColumn>
              </TableRow>
            )}
          </TableBody>
        </Table>
      </div>
    </div>
  );
}

Source: https://stackoverflow.com/questions/36656447/react-material-ui-table-cant-get-element-from-row


Answer by Isaiah Douglas

Correct me if i'm wrong, but i think the first step to your solution is the correct definition of styles for the material-ui element. I can't say for certain if there is another way to generate these styles, but a simple object such as: const inputStyle = { padding: 0, margin: 0, border: 0, background: "transparent", }; will probably not work. You probably have to use the material styles for that.

import { makeStyles } from "@material-ui/core/styles";
const useStyles = makeStyles({
  root: {
    border: "1px solid red",
    padding: 10
  },
});

and then you have to use the style hook in the component definition:

const classes = useStyles();

Source: https://stackoverflow.com/questions/62811500/changing-material-ui-table-style-in-row-getrowprops


Answer by Truett Ward

The API documentation of the TableRow React component. Learn more about the props and the CSS customization points.,If that's not sufficient, you can check the implementation of the component for more detail.,You can override the style of the component thanks to one of these customization points:

Import

import TableRow from '@material-ui/core/TableRow';
// or
import { TableRow } from '@material-ui/core';

Source: https://material-ui.com/api/table-row/


Answer by Tinsley Sexton

You can override the style of the component thanks to one of these customization points:,With a rule name of the classes object prop.,The component renders a <th> element when the parent context is a header or otherwise a <td> element.

Import

import TableCell from '@material-ui/core/TableCell';
// or
import { TableCell } from '@material-ui/core';

Source: https://material-ui.com/api/table-cell/


Answer by Lyla Ray

Checkboxes should accompany each row if the user needs to select or manipulate data.,For accessibility, the first column is set to be a <th> element, with a scope of "row". This enables screen readers to identify a cell's value by it's row and column name.,Tools to query and manipulate data

Checkboxes should accompany each row if the user needs to select or manipulate data.

/n

For accessibility, the first column is set to be a <th> element, with a scope of "row". This enables screen readers to identify a cell's value by it's row and column name.

<th>

Checkboxes should accompany each row if the user needs to select or manipulate data.

/n

For accessibility, the first column is set to be a <th> element, with a scope of "row". This enables screen readers to identify a cell's value by it's row and column name.

scope

Checkboxes should accompany each row if the user needs to select or manipulate data.

/n

For accessibility, the first column is set to be a <th> element, with a scope of "row". This enables screen readers to identify a cell's value by it's row and column name.

"row"

Source: https://v3.material-ui.com/demos/tables/


Answer by Esme Ramsey

Datatables for React using Material-UI - https://www.material-ui-datatables.com , Datatables for React using Material-UI - https://www.material-ui-datatables.com ,Supported customizable components:

import MUIDataTable from "mui-datatables";

const columns = ["Name", "Company", "City", "State"];

const data = [
 ["Joe James", "Test Corp", "Yonkers", "NY"],
 ["John Walsh", "Test Corp", "Hartford", "CT"],
 ["Bob Herm", "Test Corp", "Tampa", "FL"],
 ["James Houston", "Test Corp", "Dallas", "TX"],
];

const options = {
  filterType: 'checkbox',
};

<MUIDataTable
  title={"Employee List"}
  data={data}
  columns={columns}
  options={options}
/>

Source: https://github.com/gregnb/mui-datatables


Answer by June Kennedy

The latest TanStack news, articles, and resources, sent to your inbox.

More Details Refer

Source: https://react-table.tanstack.com/docs/examples/material-ui-components


Answer by Jon Flores

Conditional Style Object, Selectable Rows Clearing Selected Rows Overriding with Ui Component Library ,Overriding with Ui Component Library

npm install react-data-table-component styled-components

Source: https://www.npmjs.com/package/react-data-table-component