Display selected row data in another component using Material UI/React JS

Question

I am running into a bit of a problem grabbing data from a Data Grid (or XGrid) to display in another component on the page.

From the code below you can see that I am grabbing data from a local database that I am displaying in a Data Grid. What I want to do now is add the ability to take the selected rows and display the data (product ID, description, price, etc.) and display it in another component. Right now, I will settle for just a single selection.

I have tried many suggestions found here to add a onSelectionModelChange, but the only thing I am able to grab is the row id value. Not that it would make that much difference, but I am using MySQL for the backend.

Any suggestions?

Here's my React file:

import * as React from 'react';
import Axios from 'axios';
import { Grid } from '@material-ui/core';

import { createTheme } from '@material-ui/core/styles';
import { makeStyles } from '@material-ui/styles';
import { GridToolbarDensitySelector, GridToolbarFilterButton, XGrid } from '@material-ui/x-grid';

const currencyFormatter = new Intl.NumberFormat('en-US', {
    style: 'currency',
    currency: 'USD',
});

const usdPrice = {
    type: 'number',
    width: 180,
    valueFormatter: ({ value }) => currencyFormatter.format(Number(value)),
    cellClassName: 'font-tabular-nums',
};

const defaultTheme = createTheme();
const useStyles = makeStyles(
    (theme) => ({
        root: {
            padding: theme.spacing(0.5, 0.5, 0),
            justifyContent: 'space-between',
            display: 'flex',
            alignItems: 'flex-start',
            flexWrap: 'wrap',
            background: '#f3f5f6'
        },
        textField: {
            [theme.breakpoints.down('xs')]: {
                width: '100%',
            },
            margin: theme.spacing(1, 0.5, 1.5),
            '& .MuiSvgIcon-root': {
                marginRight: theme.spacing(0.5),
            },
            '& .MuiInput-underline:before': {
                borderBottom: `1px solid ${theme.palette.divider}`,
            },
        },
    }),
    { defaultTheme },
);

function FilteringToolbar() {
    const classes = useStyles();

    return (
        <div className={classes.root}>
            <div>
                <GridToolbarFilterButton />
                <GridToolbarDensitySelector />
            </div>
        </div>
    );
}

const ProductTable = () => {

    const [rowData, setRowData] = React.useState([]);
    const [rows, setRows] = React.useState(rowData);

    React.useEffect(() => {
        const axios = require('axios').default;
        Axios.get("http://localhost:3001/api/get").then((response) => {
            setRows(response.data);
        }).catch(e => {
            window.alert(e);
        });
    }, [rowData]);

    const columns = [
        { field: 'prodID', headerName: 'Product ID', width: 130, disableReorder: true } ,
        { field: 'desc', headerName: 'Description', width: 200, editable: true, disableReorder: true },
        { field: 'price', headerName: 'Price', editable: true, disableReorder: true, ...usdPrice },
        { field: 'inStock', headerName: 'In Stock', width: 110, editable: true, disableReorder: true, headerAlign: 'center', align: 'center', type: 'boolean'},
        { field: 'new', headerName: 'New', width: 110, editable: true, disableReorder: true, headerAlign: 'center', align: 'center', type: 'boolean' },
    ]

    return (
        <Grid container item xs={12}>
            <Grid container item xs={12}>
                <Grid container item xs={3} />
                <Grid container item xs={6} justifyContent="center" alignItems="center">
                <div style={{ height: 500, width: '100%', display: 'block', marginLeft: 'auto', marginRight: 'auto' }}>
                    <XGrid checkboxSelection {...rows}
                        components={{ Toolbar: FilteringToolbar }}
                        rows={rows}
                        columns={columns}
                        id="id"
                    />
            </div>
            </Grid>
            <Grid container item xs={3} />
            </Grid>
        </Grid>
    );
}

export default ProductTable;

Steve G · Accepted Answer · 2022-02-11 19:40:28Z

1

+50

I would suggest that instead of trying to get the row data that you need to pass to any child/related components from the table, you get the data directly from your own component's state. Since you already have the ids returned from onSelectionModelChange, you can simply use them to filter the rows state to get the selected items. For example:

...

const [selected, setSelected] = React.useState([]);
const [rows, setRows] = React.useState([]);

const handleSelectionChange = React.useCallback(
  (selected = []) => {
    setSelected(rows.filter(({ prodID }) => selected.includes(prodID)));
  },
  [rows] 
);

...

<XGrid
  // Calls our handler function that filters the selected items from state
  onSelectionModelChange={handleSelectionChange}
  checkboxSelection
  {...rows}
  components={{ Toolbar: FilteringToolbar }}
  rows={rows}
  columns={columns}
  // Re-wires the grid to use your `prodID` instead of it's default `id`
  getRowId={({ prodID }) => prodID}
/>

Working Code Sandbox: https://codesandbox.io/s/datagrid-selected-items-rm3f1?file=/src/App.tsx

edited Feb 11, 2022 at 19:40

answered Feb 11, 2022 at 19:22

Steve G

13.8k7 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hfontanez Over a year ago

Thanks! This looks great. I will wait for other answers but if none are provided, I will award you the bounty for this question.

Steve G Over a year ago

Thanks @hfontanez -- let me know if you need any additional clarity on the what I'm doing here.

Collectives™ on Stack Overflow

Display selected row data in another component using Material UI/React JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related