0

Does Grommet have a built in solution to only allow single or multiple selections within a dataTable? I came up with this useState function that clears the array before setting it but it has an adverse reaction of forcing the user to click twice. If array > 1 user clicks which sets the select array to [] forcing the user to click again.

import React from "react";
import ReactDOM from "react-dom";
import {Grommet, DataTable, Text, Meter, Box} from 'grommet';


const GridExample = () => {
    const [select, setSelect] = React.useState([])

    function handleRowSelect(selection) {
        console.log(`You picked ${selection}`);
        if (selection.length > 1) {
            setSelect(selection[selection.length - 1].toArray)
        } else {
            setSelect(selection)
        }

    }

    return (
        <Grommet>
            <DataTable
                select={select}
                onSelect={handleRowSelect}
                columns={[
                    {
                        property: 'name',
                        search: true,
                        header: <Text>Name</Text>,
                        primary: true,
                    },
                    {
                        property: 'percent',
                        search: true,
                        header: 'Complete',
                        render: datum => (
                            <Box pad={{vertical: 'xsmall'}}>
                                <Meter
                                    values={[{value: datum.percent}]}
                                    thickness="small"
                                    size="small"
                                />
                            </Box>
                        ),
                    },
                ]}
                data={[
                    {name: 'Alan', percent: 20},
                    {name: 'Bryan', percent: 30},
                    {name: 'Chris', percent: 40},
                    {name: 'Eric', percent: 80},
                ]}
            />
            <Text>Selected: {select}</Text>
        </Grommet>
    )
}

export default GridExample;

ReactDOM.render(
    <GridExample/>,
  document.getElementById("root")
);

Update: Using Slice in the function fixes the double click.

function handleRowSelect(selection) {
    if (selection.length > 1) {
        setSelect(selection.slice(-1))
    } else {
        setSelect(selection)
    }

}

1 Answer 1

1

I don't think there is a built-in solution (for grommet 2.17.5).

Though, you can always try to manipulate select and onSelect in different ways, for example, one way for that will be to add a condition to onSelect and disable selection option once one row had been selected already:

 onSelect={select.length < 1 && handleRowSelect}

This will make sure only one row is selected at any given point.

If you'd like the users to be able to reset their decision, you can always add a reset button that clears the array of selection, and the checkboxes will be enabled again.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.