Skip to content

Commit dc38184

Browse files
ravgeetdhillonravgeetdhillon
committed
fix: render freezed columns only when freezed columns exist
1 parent 8a9cc64 commit dc38184

File tree

1 file changed

+118
-116
lines changed

1 file changed

+118
-116
lines changed

‎src/DataTable/DataTable.tsx

Lines changed: 118 additions & 116 deletions
Original file line numberDiff line numberDiff line change
@@ -578,122 +578,124 @@ function DataTable<T>(props: TableProps<T>): JSX.Element {
578578
</Wrapper>
579579
</ResponsiveWrapper>
580580

581-
<div
582-
style={{
583-
position: 'absolute',
584-
top: 0,
585-
left: 0,
586-
}}
587-
>
588-
<Table disabled={disabled} className="rdt_Table" role="table">
589-
{showTableHead() && (
590-
<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
591-
<HeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
592-
{keepExpandableFirst ? (
593-
<>
594-
{expandableHeaderCol}
595-
{selectableHeaderCol}
596-
</>
597-
) : (
598-
<>
599-
{selectableHeaderCol}
600-
{expandableHeaderCol}
601-
</>
602-
)}
603-
604-
{freezedColumns.slice(0, 3).map(column => (
605-
<Column
606-
key={column.id}
607-
column={column}
608-
selectedColumn={selectedColumn}
609-
disabled={progressPending || sortedData.length === 0}
610-
pagination={pagination}
611-
paginationServer={paginationServer}
612-
persistSelectedOnSort={persistSelectedOnSort}
613-
selectableRowsVisibleOnly={selectableRowsVisibleOnly}
614-
sortDirection={sortDirection}
615-
sortIcon={sortIcon}
616-
sortServer={sortServer}
617-
onSort={handleSort}
618-
onDragStart={handleDragStart}
619-
onDragOver={handleDragOver}
620-
onDragEnd={handleDragEnd}
621-
onDragEnter={handleDragEnter}
622-
onDragLeave={handleDragLeave}
623-
draggingColumnId={draggingColumnId}
624-
currentSortColumnId={currentSortColumnId}
625-
currentSortDirection={currentSortDirection}
626-
/>
627-
))}
628-
</HeadRow>
629-
</Head>
630-
)}
631-
632-
{!progressPending && sortedData.length > 0 && (
633-
<Body className="rdt_TableBody" role="rowgroup">
634-
{tableRows.map((row, i) => {
635-
const key = prop(row as TableRow, keyField) as string | number;
636-
const id = isEmpty(key) ? i : key;
637-
const selected = isRowSelected(row, selectedRows, keyField);
638-
const expanded = isRowExpanded(row, expandedRows, keyField);
639-
const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row));
640-
const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row));
641-
642-
return (
643-
<Row
644-
id={id}
645-
key={id}
646-
keyField={keyField}
647-
data-row-id={id}
648-
columns={freezedColumns}
649-
row={row}
650-
rowCount={sortedData.length}
651-
rowIndex={i}
652-
selectableRows={selectableRows}
653-
expandableRows={expandableRows}
654-
expandableIcon={expandableIcon}
655-
highlightOnHover={highlightOnHover}
656-
pointerOnHover={pointerOnHover}
657-
dense={dense}
658-
expandOnRowClicked={expandOnRowClicked}
659-
expandOnRowDoubleClicked={expandOnRowDoubleClicked}
660-
expandableRowsComponent={expandableRowsComponent}
661-
expandableRowsComponentProps={expandableRowsComponentProps}
662-
expandableRowsHideExpander={expandableRowsHideExpander}
663-
defaultExpanderDisabled={expanderDisabled}
664-
defaultExpanded={expanderExpander}
665-
expandableInheritConditionalStyles={expandableInheritConditionalStyles}
666-
conditionalRowStyles={conditionalRowStyles}
667-
selected={selected}
668-
expanded={expanded}
669-
selectableRowsHighlight={selectableRowsHighlight}
670-
selectableRowsComponent={selectableRowsComponent}
671-
selectableRowsComponentProps={selectableRowsComponentProps}
672-
selectableRowDisabled={selectableRowDisabled}
673-
expandableRowDisabled={expandableRowDisabled}
674-
selectableRowsSingle={selectableRowsSingle}
675-
expandableRowsSingle={expandableRowsSingle}
676-
striped={striped}
677-
keepExpandableFirst={keepExpandableFirst}
678-
onRowExpandToggled={onRowExpandToggled}
679-
onRowClicked={handleRowClicked}
680-
onRowDoubleClicked={handleRowDoubleClicked}
681-
onSelectedRow={handleSelectedRow}
682-
onExpandedRow={handleExpandedRow}
683-
draggingColumnId={draggingColumnId}
684-
onDragStart={handleDragStart}
685-
onDragOver={handleDragOver}
686-
onDragEnd={handleDragEnd}
687-
onDragEnter={handleDragEnter}
688-
onDragLeave={handleDragLeave}
689-
/>
690-
);
691-
})}
692-
</Body>
693-
)}
694-
</Table>
695-
{footer && <div>{footer}</div>}
696-
</div>
581+
{freezedColumns.length > 0 && (
582+
<div
583+
style={{
584+
position: 'absolute',
585+
top: 0,
586+
left: 0,
587+
}}
588+
>
589+
<Table disabled={disabled} className="rdt_Table" role="table">
590+
{showTableHead() && (
591+
<Head className="rdt_TableHead" role="rowgroup" fixedHeader={fixedHeader}>
592+
<HeadRow className="rdt_TableHeadRow" role="row" dense={dense}>
593+
{keepExpandableFirst ? (
594+
<>
595+
{expandableHeaderCol}
596+
{selectableHeaderCol}
597+
</>
598+
) : (
599+
<>
600+
{selectableHeaderCol}
601+
{expandableHeaderCol}
602+
</>
603+
)}
604+
605+
{freezedColumns.slice(0, 3).map(column => (
606+
<Column
607+
key={column.id}
608+
column={column}
609+
selectedColumn={selectedColumn}
610+
disabled={progressPending || sortedData.length === 0}
611+
pagination={pagination}
612+
paginationServer={paginationServer}
613+
persistSelectedOnSort={persistSelectedOnSort}
614+
selectableRowsVisibleOnly={selectableRowsVisibleOnly}
615+
sortDirection={sortDirection}
616+
sortIcon={sortIcon}
617+
sortServer={sortServer}
618+
onSort={handleSort}
619+
onDragStart={handleDragStart}
620+
onDragOver={handleDragOver}
621+
onDragEnd={handleDragEnd}
622+
onDragEnter={handleDragEnter}
623+
onDragLeave={handleDragLeave}
624+
draggingColumnId={draggingColumnId}
625+
currentSortColumnId={currentSortColumnId}
626+
currentSortDirection={currentSortDirection}
627+
/>
628+
))}
629+
</HeadRow>
630+
</Head>
631+
)}
632+
633+
{!progressPending && sortedData.length > 0 && (
634+
<Body className="rdt_TableBody" role="rowgroup">
635+
{tableRows.map((row, i) => {
636+
const key = prop(row as TableRow, keyField) as string | number;
637+
const id = isEmpty(key) ? i : key;
638+
const selected = isRowSelected(row, selectedRows, keyField);
639+
const expanded = isRowExpanded(row, expandedRows, keyField);
640+
const expanderExpander = !!(expandableRows && expandableRowExpanded && expandableRowExpanded(row));
641+
const expanderDisabled = !!(expandableRows && expandableRowDisabled && expandableRowDisabled(row));
642+
643+
return (
644+
<Row
645+
id={id}
646+
key={id}
647+
keyField={keyField}
648+
data-row-id={id}
649+
columns={freezedColumns}
650+
row={row}
651+
rowCount={sortedData.length}
652+
rowIndex={i}
653+
selectableRows={selectableRows}
654+
expandableRows={expandableRows}
655+
expandableIcon={expandableIcon}
656+
highlightOnHover={highlightOnHover}
657+
pointerOnHover={pointerOnHover}
658+
dense={dense}
659+
expandOnRowClicked={expandOnRowClicked}
660+
expandOnRowDoubleClicked={expandOnRowDoubleClicked}
661+
expandableRowsComponent={expandableRowsComponent}
662+
expandableRowsComponentProps={expandableRowsComponentProps}
663+
expandableRowsHideExpander={expandableRowsHideExpander}
664+
defaultExpanderDisabled={expanderDisabled}
665+
defaultExpanded={expanderExpander}
666+
expandableInheritConditionalStyles={expandableInheritConditionalStyles}
667+
conditionalRowStyles={conditionalRowStyles}
668+
selected={selected}
669+
expanded={expanded}
670+
selectableRowsHighlight={selectableRowsHighlight}
671+
selectableRowsComponent={selectableRowsComponent}
672+
selectableRowsComponentProps={selectableRowsComponentProps}
673+
selectableRowDisabled={selectableRowDisabled}
674+
expandableRowDisabled={expandableRowDisabled}
675+
selectableRowsSingle={selectableRowsSingle}
676+
expandableRowsSingle={expandableRowsSingle}
677+
striped={striped}
678+
keepExpandableFirst={keepExpandableFirst}
679+
onRowExpandToggled={onRowExpandToggled}
680+
onRowClicked={handleRowClicked}
681+
onRowDoubleClicked={handleRowDoubleClicked}
682+
onSelectedRow={handleSelectedRow}
683+
onExpandedRow={handleExpandedRow}
684+
draggingColumnId={draggingColumnId}
685+
onDragStart={handleDragStart}
686+
onDragOver={handleDragOver}
687+
onDragEnd={handleDragEnd}
688+
onDragEnter={handleDragEnter}
689+
onDragLeave={handleDragLeave}
690+
/>
691+
);
692+
})}
693+
</Body>
694+
)}
695+
</Table>
696+
{footer && <div>{footer}</div>}
697+
</div>
698+
)}
697699
</div>
698700

699701
{enabledPagination && (

0 commit comments

Comments
 (0)