Selecting single record

[shahns]

Is your feature request related to a problem? Please describe.
Currently, the way of selecting records allows for multiple record selection. Is there out-of-the-box way to restrict selection to single record only?

[icflorescu]

Not at the moment.
Do you think we should implement this as a new feature?
If so, can you please elaborate on how you'd like it to work?
For instance, in case of single-record selection, should we render a Checkbox or a Radio?

[ShahriarKh]

How about this?

const [selectedRecords, setSelectedRecords] = useState([]);

<DataTable
    selectedRecords={selectedRecords}
    onSelectedRecordsChange={setSelectedRecords}
    isRecordSelectable={(record) => record == selectedRecords[0] || selectedRecords.length < 1}
/>

Or for any n, you can simply do:

const n = 12;

<DataTable 
    {/* ... */}
    isRecordSelectable={(record) => selectedRecords.includes(record) || selectedRecords.length < n} 
/>

[shahns]

Not at the moment. Do you think we should implement this as a new feature? If so, can you please elaborate on how you'd like it to work? For instance, in case of single-record selection, should we render a Checkbox or a Radio?

A property allowMultipleSelect can be added which makes sure only current selected record is added to selectedRecords state.

I would still go ahead with checkbox and removing checkbox from the header field.

[shahns]

    isRecordSelectable={(record) => record == selectedRecords[0] || selectedRecords.length < 1}

@ShahriarKh thanks for the suggestion. But, unfortunately this doesn't serve the purpose.

I tried this. Still I could select multiple items by clicking header checkbox.

Also, this requires me to uncheck the selected record every time before checking the new record.

For now, I use this workaround:

const [selectedRecords, setSelectedRecords] = useState<DataProps[]>([]);
onSelectedRecordsChange={(records) => setSelectedRecords([records[records.length - 1]])}

[otobot1]

I think if you are only able to select one row then a radio would be more clear. But I think making that configurable (with radio as default) would be ideal.

[shahns]

Hi, does community feel this feature is important and is it planned sometime in near future? If not, I don't mind closing this issue.

[russocorp]

Single record selection clicking on line is really cool.
With this, i can get ID from clicked line and use for edit item and other things too.

[icflorescu]

@russocorp You can easily get the record data of a clicked row with onRowClick: handling-row-clicks

[icflorescu]

In the end, since this is really an edge case, I'd suggest using a custom column with a render function showing a component.

[russocorp]

@russocorp You can easily get the record data of a clicked row with onRowClick: handling-row-clicks

I know that, but after click, line dont have a diferent background or something like that.
https://www.ag-grid.com/react-data-grid/row-selection/ have this, for example.

[icflorescu]

@russocorp Since you'll have to manage the selected row in your state anyway, you could easily apply your own particular style to it: https://icflorescu.github.io/mantine-datatable/examples/additional-styling#row-styling