Codes looks as follows:
Code: Select all
<DataTable
value={tableData} ref={dataTableRef} loading={loading}
emptyMessage={emptyMessage}
sortMode="multiple" removableSort
selectionMode="checkbox" selection={selectedData} onSelectionChange={onSelectionChange}
scrollable scrollHeight={expanded ? "70vh" : "250px"}
resizableColumns columnResizeMode="expand"
editMode="row" editingRows={editingRows} onRowEditChange={(e) => setEditingRows(e.data)}
onRowClick={(e) => setEditingRows([e.data])}
style={{width: "100%"}} frozenWidth="3em"
tableClassName="p-text-nowrap" cellClassName={selectionBody}
dragSelection={isDragSelection}
>
<Column selectionMode="multiple" headerStyle={{width: '3em', height: '6em'}} bodyStyle={{height: '2em'}} frozen></Column> // the row of checkbox to select the row
<Column field="abc" header="abc" filter sortable></Column>
<Column field="def" header="abc" filter sortable></Column>
<Column field="ghi" header="abc" filter sortable></Column>
<Column field="jkl" header="abc" filter sortable></Column>
<Column field="mno" header="abc" filter sortable></Column>