Skip to content

Commit

Permalink
Fixed #4078 - DataTable CSS and responsive structure improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@mertsincan
mertsincan committed Feb 20, 2023
1 parent 28de6e7 commit eafe8d7
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 196 deletions.
38 changes: 19 additions & 19 deletions components/lib/datatable/BodyRow.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export const BodyRow = React.memo((props) => {
};

const getTabIndex = () => {
return isFocusable() && !props.allowCellSelection ? (props.index === 0 ? props.tabIndex : -1) : null;
return isFocusable() && !props.allowCellSelection ? (props.rowIndex === 0 ? props.tabIndex : -1) : null;
};

const findIndex = (collection, rowData) => {
Expand Down Expand Up @@ -95,23 +95,23 @@ export const BodyRow = React.memo((props) => {
};

const onClick = (event) => {
props.onRowClick({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onDoubleClick = (event) => {
props.onRowDoubleClick({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowDoubleClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onRightClick = (event) => {
props.onRowRightClick({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowRightClick({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onMouseEnter = (event) => {
props.onRowMouseEnter({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowMouseEnter({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onMouseLeave = (event) => {
props.onRowMouseLeave({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowMouseLeave({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onTouchEnd = (event) => {
Expand Down Expand Up @@ -173,31 +173,31 @@ export const BodyRow = React.memo((props) => {
};

const onMouseDown = (event) => {
props.onRowMouseDown({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowMouseDown({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onMouseUp = (event) => {
props.onRowMouseUp({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowMouseUp({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onDragStart = (event) => {
props.onRowDragStart({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowDragStart({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onDragOver = (event) => {
props.onRowDragOver({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowDragOver({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onDragLeave = (event) => {
props.onRowDragLeave({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowDragLeave({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onDragEnd = (event) => {
props.onRowDragEnd({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowDragEnd({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onDrop = (event) => {
props.onRowDrop({ originalEvent: event, data: props.rowData, index: props.index });
props.onRowDrop({ originalEvent: event, data: props.rowData, index: props.rowIndex });
};

const onEditChange = (e, isEditing) => {
Expand Down Expand Up @@ -246,7 +246,7 @@ export const BodyRow = React.memo((props) => {
props.onRowEditInit({
originalEvent: event,
data: props.rowData,
index: props.index
index: props.rowIndex
});
}

Expand All @@ -263,7 +263,7 @@ export const BodyRow = React.memo((props) => {
props.onRowEditSave({
originalEvent: event,
data: props.rowData,
index: props.index,
index: props.rowIndex,
valid
});
}
Expand All @@ -286,7 +286,7 @@ export const BodyRow = React.memo((props) => {
props.onRowEditCancel({
originalEvent: event,
data: props.rowData,
index: props.index
index: props.rowIndex
});
}

Expand All @@ -309,7 +309,7 @@ export const BodyRow = React.memo((props) => {
tableSelector={props.tableSelector}
column={col}
rowData={props.rowData}
rowIndex={props.index}
rowIndex={props.rowIndex}
index={i}
rowSpan={rowSpan}
dataKey={props.dataKey}
Expand Down Expand Up @@ -355,8 +355,8 @@ export const BodyRow = React.memo((props) => {
const className = classNames(rowClassName, {
'p-highlight': (!props.allowCellSelection && props.selected) || props.contextMenuSelected,
'p-highlight-contextmenu': props.contextMenuSelected,
'p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.index }),
'p-row-odd': props.index % 2 !== 0
'p-selectable-row': props.allowRowSelection && props.isSelectable({ data: props.rowData, index: props.rowIndex }),
'p-row-odd': props.rowIndex % 2 !== 0
});
const style = { height: props.virtualScrollerOptions ? props.virtualScrollerOptions.itemSize : undefined };
const content = createContent();
Expand Down
120 changes: 28 additions & 92 deletions components/lib/datatable/DataTable.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,21 +2,24 @@
position: relative;
}

.p-datatable table {
border-collapse: collapse;
min-width: 100%;
table-layout: fixed;
.p-datatable > .p-datatable-wrapper {
overflow: auto;
}

.p-datatable .p-sortable-column {
cursor: pointer;
user-select: none;
.p-datatable-table {
border-spacing: 0px;
width: 100%;
}

.p-datatable .p-sortable-disabled {
cursor: auto;
}

.p-datatable .p-sortable-column {
cursor: pointer;
user-select: none;
}

.p-datatable .p-sortable-column .p-column-title,
.p-datatable .p-sortable-column .p-sortable-column-icon,
.p-datatable .p-sortable-column .p-sortable-column-badge {
Expand All @@ -29,15 +32,6 @@
justify-content: center;
}

.p-datatable-responsive-scroll > .p-datatable-wrapper {
overflow-x: auto;
}

.p-datatable-responsive-scroll > .p-datatable-wrapper > table,
.p-datatable-auto-layout > .p-datatable-wrapper > table {
table-layout: auto;
}

.p-datatable-selectable .p-selectable-row,
.p-datatable-selectable-cell .p-selectable-cell {
cursor: pointer;
Expand All @@ -49,45 +43,22 @@
}

/* Scrollable */
.p-datatable-scrollable .p-datatable-wrapper {
.p-datatable-scrollable > .p-datatable-wrapper {
position: relative;
overflow: auto;
}

.p-datatable-scrollable .p-datatable-thead,
.p-datatable-scrollable .p-datatable-tbody,
.p-datatable-scrollable .p-datatable-tfoot {
display: block;
}

.p-datatable-scrollable .p-datatable-thead > tr,
.p-datatable-scrollable .p-datatable-tbody > tr,
.p-datatable-scrollable .p-datatable-tfoot > tr {
display: flex;
flex-wrap: nowrap;
width: 100%;
}

.p-datatable-scrollable .p-datatable-thead > tr > th,
.p-datatable-scrollable .p-datatable-tbody > tr > td,
.p-datatable-scrollable .p-datatable-tfoot > tr > td {
display: flex;
flex: 1 1 0;
align-items: center;
}

.p-datatable-scrollable .p-datatable-thead {
.p-datatable-scrollable-table > .p-datatable-thead {
position: sticky;
top: 0;
z-index: 1;
}

.p-datatable-scrollable .p-datatable-frozen-tbody {
.p-datatable-scrollable-table > .p-datatable-frozen-tbody {
position: sticky;
z-index: 1;
}

.p-datatable-scrollable .p-datatable-tfoot {
.p-datatable-scrollable-table > .p-datatable-tfoot {
position: sticky;
bottom: 0;
z-index: 1;
Expand All @@ -102,77 +73,38 @@
z-index: 1;
}

.p-datatable-scrollable-both .p-datatable-thead > tr > th,
.p-datatable-scrollable-both .p-datatable-tbody > tr > td,
.p-datatable-scrollable-both .p-datatable-tfoot > tr > td,
.p-datatable-scrollable-horizontal .p-datatable-thead > tr > th
.p-datatable-scrollable-horizontal .p-datatable-tbody > tr > td,
.p-datatable-scrollable-horizontal .p-datatable-tfoot > tr > td {
flex: 0 0 auto;
}

.p-datatable-flex-scrollable {
display: flex;
flex-direction: column;
height: 100%;
}

.p-datatable-flex-scrollable .p-datatable-wrapper {
.p-datatable-flex-scrollable > .p-datatable-wrapper {
display: flex;
flex-direction: column;
flex: 1;
height: 100%;
}

.p-datatable-scrollable .p-rowgroup-header {
.p-datatable-scrollable-table > .p-datatable-tbody > .p-rowgroup-header {
position: sticky;
z-index: 1;
}

.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead,
.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot {
display: table;
border-collapse: collapse;
width: 100%;
table-layout: fixed;
}

.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr,
.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr {
display: table-row;
}

.p-datatable-scrollable.p-datatable-grouped-header .p-datatable-thead > tr > th,
.p-datatable-scrollable.p-datatable-grouped-footer .p-datatable-tfoot > tr > td {
display: table-cell;
}

.p-datatable-virtual-table {
position: absolute;
}

.p-datatable-scrollable .p-virtualscroller > .p-datatable-table {
display: inline-block; /* For Safari */
}

/* Resizable */
.p-datatable-resizable > .p-datatable-wrapper {
overflow-x: auto;
}

.p-datatable-resizable .p-datatable-thead > tr > th,
.p-datatable-resizable .p-datatable-tfoot > tr > td,
.p-datatable-resizable .p-datatable-tbody > tr > td {
.p-datatable-resizable-table > .p-datatable-thead > tr > th,
.p-datatable-resizable-table > .p-datatable-tfoot > tr > td,
.p-datatable-resizable-table > .p-datatable-tbody > tr > td {
overflow: hidden;
white-space: nowrap;
}

.p-datatable-resizable .p-resizable-column {
.p-datatable-resizable-table > .p-datatable-thead > tr > th.p-resizable-column:not(.p-frozen-column) {
background-clip: padding-box;
position: relative;
}

.p-datatable-resizable-fit .p-resizable-column:last-child .p-column-resizer {
.p-datatable-resizable-table-fit > .p-datatable-thead > tr > th.p-resizable-column:last-child .p-column-resizer {
display: none;
}

Expand All @@ -182,10 +114,10 @@
top: 0;
right: 0;
margin: 0;
width: .5rem;
width: 0.5rem;
height: 100%;
padding: 0px;
cursor:col-resize;
cursor: col-resize;
border: 1px solid transparent;
}

Expand Down Expand Up @@ -311,7 +243,11 @@
}

/* VirtualScroller */
.p-datatable .p-virtualscroller-loading {
.p-datatable-virtualscroller-spacer {
display: flex;
}

.p-datatable .p-virtualscroller .p-virtualscroller-loading {
transform: none !important;
min-height: 0;
position: sticky;
Expand Down
Loading

0 comments on commit eafe8d7

Please sign in to comment.