Skip to content

Commit ee9ef3f

Browse files
razma06razma06
committed
added feature for datatable component. You can change checkboxes position from left to write
1 parent 5844212 commit ee9ef3f

File tree

8 files changed

+11189
-10342
lines changed

8 files changed

+11189
-10342
lines changed

‎.vscode/settings.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
"files.trimTrailingWhitespace": true,
1010
"eslint.nodePath": "./src",
1111
"editor.formatOnSave": false,
12-
"window.zoomLevel": 0,
12+
"window.zoomLevel": 1,
1313
"workbench.iconTheme": "material-icon-theme",
1414
// "terminal.integrated.fontFamily": "Knack Nerd Font",
1515
"terminal.integrated.fontSize": 13,

‎src/DataTable/DataTable.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
4545
pointerOnHover = defaultProps.pointerOnHover,
4646
dense = defaultProps.dense,
4747
selectableRows = defaultProps.selectableRows,
48+
selectableRowsPosition = defaultProps.selectableRowsPosition,
4849
selectableRowsSingle = defaultProps.selectableRowsSingle,
4950
selectableRowsHighlight = defaultProps.selectableRowsHighlight,
5051
selectableRowsNoSelectAll = defaultProps.selectableRowsNoSelectAll,
@@ -373,6 +374,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
373374
<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
374375
<HeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
375376
{selectableRows &&
377+
selectableRowsPosition === 'left' &&
376378
(showSelectAll ? (
377379
<CellBase style={{ flex: '0 0 48px' }} />
378380
) : (
@@ -411,6 +413,23 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
411413
draggingColumnId={draggingColumnId}
412414
/>
413415
))}
416+
{selectableRows &&
417+
selectableRowsPosition === 'right' &&
418+
(showSelectAll ? (
419+
<CellBase style={{ flex: '0 0 48px' }} />
420+
) : (
421+
<ColumnCheckbox
422+
allSelected={allSelected}
423+
selectedRows={selectedRows}
424+
selectableRowsComponent={selectableRowsComponent}
425+
selectableRowsComponentProps={selectableRowsComponentProps}
426+
selectableRowDisabled={selectableRowDisabled}
427+
rowData={visibleRows}
428+
keyField={keyField}
429+
mergeSelections={mergeSelections}
430+
onSelectAllRows={handleSelectAllRows}
431+
/>
432+
))}
414433
</HeadRow>
415434
</Head>
416435
)}
@@ -439,6 +458,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
439458
rowCount={sortedData.length}
440459
rowIndex={i}
441460
selectableRows={selectableRows}
461+
selectableRowsPosition={selectableRowsPosition}
442462
expandableRows={expandableRows}
443463
expandableIcon={expandableIcon}
444464
highlightOnHover={highlightOnHover}

‎src/DataTable/TableRow.tsx‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,7 @@ type DProps<T> = Pick<
6767
| 'pointerOnHover'
6868
| 'selectableRowDisabled'
6969
| 'selectableRows'
70+
| 'selectableRowsPosition'
7071
| 'selectableRowsComponent'
7172
| 'selectableRowsComponentProps'
7273
| 'selectableRowsHighlight'
@@ -121,6 +122,7 @@ function Row<T>({
121122
rowIndex,
122123
selectableRowDisabled = null,
123124
selectableRows = false,
125+
selectableRowsPosition,
124126
selectableRowsComponent,
125127
selectableRowsComponentProps,
126128
selectableRowsHighlight = false,
@@ -210,7 +212,7 @@ function Row<T>({
210212
selected={highlightSelected}
211213
style={style}
212214
>
213-
{selectableRows && (
215+
{selectableRows && selectableRowsPosition === 'left' && (
214216
<TableCellCheckbox
215217
name={`select-row-${rowKeyField}`}
216218
keyField={keyField}
@@ -259,6 +261,20 @@ function Row<T>({
259261
/>
260262
);
261263
})}
264+
{selectableRows && selectableRowsPosition === 'right' && (
265+
<TableCellCheckbox
266+
name={`select-row-${rowKeyField}`}
267+
keyField={keyField}
268+
row={row}
269+
rowCount={rowCount}
270+
selected={selected}
271+
selectableRowsComponent={selectableRowsComponent}
272+
selectableRowsComponentProps={selectableRowsComponentProps}
273+
selectableRowDisabled={selectableRowDisabled}
274+
selectableRowsSingle={selectableRowsSingle}
275+
onSelectedRow={onSelectedRow}
276+
/>
277+
)}
262278
</TableRowStyle>
263279

264280
{expandableRows && expanded && (

‎src/DataTable/__tests__/DataTable.test.tsx‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -943,6 +943,15 @@ describe('DataTable::selectableRows', () => {
943943
expect(container.firstChild).toMatchSnapshot();
944944
});
945945

946+
test("should render checkbox as the last column when selectableRows is true and selectableRowsPosition is 'right'", () => {
947+
const mock = dataMock();
948+
const { container } = render(
949+
<DataTable data={mock.data} columns={mock.columns} selectableRows selectableRowsPosition="right" />,
950+
);
951+
952+
expect(container.lastChild).toMatchSnapshot();
953+
});
954+
946955
test('should render correctly when selectableRowsHighlight is true and a row is selected', () => {
947956
const mock = dataMock();
948957
const { container } = render(

0 commit comments

Comments
 (0)