Skip to content

Commit 8a9cc64

Browse files
ravgeetdhillonravgeetdhillon
authored
feat: added option to freeze columns (#3)
1 parent a741242 commit 8a9cc64

File tree

2 files changed

+142
-18
lines changed

2 files changed

+142
-18
lines changed

‎src/DataTable/DataTable.tsx

Lines changed: 141 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -137,6 +137,11 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
137137
defaultSortColumn,
138138
} = useColumns(columns, onColumnOrderChange, defaultSortFieldId, defaultSortAsc);
139139

140+
const freezedColumns = React.useMemo(() => {
141+
const index = tableColumns.findIndex(column => column.freeze);
142+
return tableColumns.slice(0, index + 1);
143+
}, [tableColumns]);
144+
140145
const [
141146
{
142147
rowsPerPage,
@@ -448,16 +453,138 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
448453
{subHeaderComponent}
449454
</Subheader>
450455
)}
451-
452-
<ResponsiveWrapper
453-
responsive={responsive}
454-
fixedHeader={fixedHeader}
455-
fixedHeaderScrollHeight={fixedHeaderScrollHeight}
456-
{...wrapperProps}
457-
>
458-
<Wrapper>
459-
{progressPending && !persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
460-
456+
<div style={{ position: 'relative' }}>
457+
<ResponsiveWrapper
458+
responsive={responsive}
459+
fixedHeader={fixedHeader}
460+
fixedHeaderScrollHeight={fixedHeaderScrollHeight}
461+
{...wrapperProps}
462+
>
463+
<Wrapper>
464+
{progressPending && !persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
465+
466+
<Table disabled={disabled} className="rdt_Table" role="table">
467+
{showTableHead() && (
468+
<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
469+
<HeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
470+
{keepExpandableFirst ? (
471+
<>
472+
{expandableHeaderCol}
473+
{selectableHeaderCol}
474+
</>
475+
) : (
476+
<>
477+
{selectableHeaderCol}
478+
{expandableHeaderCol}
479+
</>
480+
)}
481+
482+
{tableColumns.map(column => (
483+
<Column
484+
key={column.id}
485+
column={column}
486+
selectedColumn={selectedColumn}
487+
disabled={progressPending || sortedData.length === 0}
488+
pagination={pagination}
489+
paginationServer={paginationServer}
490+
persistSelectedOnSort={persistSelectedOnSort}
491+
selectableRowsVisibleOnly={selectableRowsVisibleOnly}
492+
sortDirection={sortDirection}
493+
sortIcon={sortIcon}
494+
sortServer={sortServer}
495+
onSort={handleSort}
496+
onDragStart={handleDragStart}
497+
onDragOver={handleDragOver}
498+
onDragEnd={handleDragEnd}
499+
onDragEnter={handleDragEnter}
500+
onDragLeave={handleDragLeave}
501+
draggingColumnId={draggingColumnId}
502+
currentSortColumnId={currentSortColumnId}
503+
currentSortDirection={currentSortDirection}
504+
/>
505+
))}
506+
</HeadRow>
507+
</Head>
508+
)}
509+
510+
{!sortedData.length && !progressPending && <NoData>{noDataComponent}</NoData>}
511+
512+
{progressPending && persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
513+
514+
{!progressPending && sortedData.length > 0 && (
515+
<Body className="rdt_TableBody" role="rowgroup">
516+
{tableRows.map((row, i) => {
517+
const key = prop(row as TableRow, keyField) as string | number;
518+
const id = isEmpty(key) ? i : key;
519+
const selected = isRowSelected(row, selectedRows, keyField);
520+
const expanded = isRowExpanded(row, expandedRows, keyField);
521+
const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row));
522+
const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row));
523+
524+
return (
525+
<Row
526+
id={id}
527+
key={id}
528+
keyField={keyField}
529+
data-row-id={id}
530+
columns={tableColumns}
531+
row={row}
532+
rowCount={sortedData.length}
533+
rowIndex={i}
534+
selectableRows={selectableRows}
535+
expandableRows={expandableRows}
536+
expandableIcon={expandableIcon}
537+
highlightOnHover={highlightOnHover}
538+
pointerOnHover={pointerOnHover}
539+
dense={dense}
540+
expandOnRowClicked={expandOnRowClicked}
541+
expandOnRowDoubleClicked={expandOnRowDoubleClicked}
542+
expandableRowsComponent={expandableRowsComponent}
543+
expandableRowsComponentProps={expandableRowsComponentProps}
544+
expandableRowsHideExpander={expandableRowsHideExpander}
545+
defaultExpanderDisabled={expanderDisabled}
546+
defaultExpanded={expanderExpander}
547+
expandableInheritConditionalStyles={expandableInheritConditionalStyles}
548+
conditionalRowStyles={conditionalRowStyles}
549+
selected={selected}
550+
expanded={expanded}
551+
selectableRowsHighlight={selectableRowsHighlight}
552+
selectableRowsComponent={selectableRowsComponent}
553+
selectableRowsComponentProps={selectableRowsComponentProps}
554+
selectableRowDisabled={selectableRowDisabled}
555+
expandableRowDisabled={expandableRowDisabled}
556+
selectableRowsSingle={selectableRowsSingle}
557+
expandableRowsSingle={expandableRowsSingle}
558+
striped={striped}
559+
keepExpandableFirst={keepExpandableFirst}
560+
onRowExpandToggled={onRowExpandToggled}
561+
onRowClicked={handleRowClicked}
562+
onRowDoubleClicked={handleRowDoubleClicked}
563+
onSelectedRow={handleSelectedRow}
564+
onExpandedRow={handleExpandedRow}
565+
draggingColumnId={draggingColumnId}
566+
onDragStart={handleDragStart}
567+
onDragOver={handleDragOver}
568+
onDragEnd={handleDragEnd}
569+
onDragEnter={handleDragEnter}
570+
onDragLeave={handleDragLeave}
571+
/>
572+
);
573+
})}
574+
</Body>
575+
)}
576+
</Table>
577+
{footer && <div>{footer}</div>}
578+
</Wrapper>
579+
</ResponsiveWrapper>
580+
581+
<div
582+
style={{
583+
position: 'absolute',
584+
top: 0,
585+
left: 0,
586+
}}
587+
>
461588
<Table disabled={disabled} className="rdt_Table" role="table">
462589
{showTableHead() && (
463590
<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
@@ -474,7 +601,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
474601
</>
475602
)}
476603

477-
{tableColumns.map(column => (
604+
{freezedColumns.slice(0, 3).map(column => (
478605
<Column
479606
key={column.id}
480607
column={column}
@@ -502,10 +629,6 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
502629
</Head>
503630
)}
504631

505-
{!sortedData.length && !progressPending && <NoData>{noDataComponent}</NoData>}
506-
507-
{progressPending && persistTableHead && <ProgressWrapper>{progressComponent}</ProgressWrapper>}
508-
509632
{!progressPending && sortedData.length > 0 && (
510633
<Body className="rdt_TableBody" role="rowgroup">
511634
{tableRows.map((row, i) => {
@@ -522,7 +645,7 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
522645
key={id}
523646
keyField={keyField}
524647
data-row-id={id}
525-
columns={tableColumns}
648+
columns={freezedColumns}
526649
row={row}
527650
rowCount={sortedData.length}
528651
rowIndex={i}
@@ -570,8 +693,8 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
570693
)}
571694
</Table>
572695
{footer && <div>{footer}</div>}
573-
</Wrapper>
574-
</ResponsiveWrapper>
696+
</div>
697+
</div>
575698

576699
{enabledPagination && (
577700
<div>

‎src/DataTable/types.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -151,6 +151,7 @@ export interface TableColumn<T> extends TableColumnBase {
151151
format?: Format<T> | undefined;
152152
selector?: Selector<T>;
153153
sortFunction?: ColumnSortFunction<T>;
154+
freeze?: boolean;
154155
}
155156

156157
export interface ConditionalStyles<T> {

0 commit comments

Comments
 (0)