Grommet DataTable Only allow Single select

Question

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)
    }

}

score 1 · Answer 1 · answered Sep 03 '21 at 21:24

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.

Grommet DataTable Only allow Single select

1 Answers1