Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

4001 - Datatable use Datagrid - Add first col sticky #4202

Merged
merged 5 commits into from
Jan 10, 2025
Merged

4001 - Datatable use Datagrid - Add first col sticky #4202

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
c605cee
4001 - Add first col sticky
yaguzmang Jan 9, 2025
b1256af
4001 - Add firstHeaderRowSpan empty check
yaguzmang Jan 9, 2025
4de1fff
4001 - Move sticky styles to a more specific data cell class
yaguzmang Jan 9, 2025
2c98d24
4001 - Make select cells dropdown menu visible above sticky cells
yaguzmang Jan 9, 2025
9dd6b1b
4001 - Add scss z-index variables
yaguzmang Jan 9, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion src/client/pages/Print/Header/Header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ $toolbarHeight: $spacing-l;
position: fixed;
top: 0;
width: 100dvw;
z-index: 1;
z-index: 2;
}

@media print {
Expand Down
12 changes: 10 additions & 2 deletions src/client/pages/Section/DataTable/Table/GridHeadCell/GridHeadCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ import { useGridHeadCellProps } from './hooks/useGridHeadCellProps'
import { GridHeadCellProps } from './types'

const GridHeadCell: React.FC<GridHeadCellProps> = (props) => {
const { col, table } = props
const { col, firstCol, table } = props

const cycle = useCycle()
const { className, gridColumn, gridRow, lastCol, odpHeader } = useGridHeadCellProps(props)
Expand All @@ -34,7 +34,15 @@ const GridHeadCell: React.FC<GridHeadCellProps> = (props) => {
}

return (
<DataCell key={col.uuid} className={className} gridColumn={gridColumn} gridRow={gridRow} header lastCol={lastCol}>
<DataCell
key={col.uuid}
className={className}
firstCol={firstCol}
gridColumn={gridColumn}
gridRow={gridRow}
header
lastCol={lastCol}
>
{Cols.getLabel({ cycle, col, t })}
</DataCell>
)
Expand Down
1 change: 1 addition & 0 deletions src/client/pages/Section/DataTable/Table/GridHeadCell/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ export type GridHeadCellProps = {
col: Col
colIndex: number
data: RecordAssessmentData
firstCol: boolean
headers: Array<string>
row: Row
rowIndex: number
Expand Down
10 changes: 10 additions & 0 deletions src/client/pages/Section/DataTable/Table/RowData/Cell/Cell.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,16 @@
display: flex;
justify-content: end;

&.firstCol {
left: 0;
position: sticky;
z-index: 1;
}

.select__wrapper > .select__container > div:not(.select__control) {
z-index: 2;
}

minotogna marked this conversation as resolved.
Show resolved Hide resolved
&.readonly,
&.calculated-input {
cursor: default;
Expand Down
1 change: 1 addition & 0 deletions src/client/pages/Section/DataTable/Table/Table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@

.table-grid-container {
margin-bottom: 28px;
overflow-x: auto;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Didn't we add it already some place
Else ?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, we have it in table-grid-container so it doesn't stretch the page and in table-grid, so that it's only the grid moving and not the buttons:

2025-01-09.14-55-38.mp4

It's a bit different now that I removed some of the fra table wrapper divs.


&.secondary-table {
margin-top: $spacing-xs;
Expand Down
32 changes: 18 additions & 14 deletions src/client/pages/Section/DataTable/Table/Table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const Table: React.FC<Props> = (props) => {

const gridRef = useRef<HTMLDivElement>(null)

const { headers, noticeMessages, rowsData, rowsHeader, table, withReview } = useParsedTable({
const { firstHeaderRowSpan, headers, noticeMessages, rowsData, rowsHeader, table, withReview } = useParsedTable({
assessmentName,
data,
table: tableProps,
Expand Down Expand Up @@ -73,19 +73,23 @@ const Table: React.FC<Props> = (props) => {
>
{rowsHeader.map((row, rowIndex) => (
<React.Fragment key={row.uuid}>
{row.cols.map((col, colIndex) => (
<GridHeadCell
key={col.uuid}
assessmentName={assessmentName}
col={col}
colIndex={colIndex}
data={data}
headers={headers}
row={row}
rowIndex={rowIndex}
table={table}
/>
))}
{row.cols.map((col, colIndex) => {
const firstCol = colIndex === 0 && (rowIndex === 0 || rowIndex >= firstHeaderRowSpan)
return (
<GridHeadCell
key={col.uuid}
assessmentName={assessmentName}
col={col}
colIndex={colIndex}
data={data}
firstCol={firstCol}
headers={headers}
row={row}
rowIndex={rowIndex}
table={table}
/>
)
})}
{withActions && <div />}
</React.Fragment>
))}
Expand Down
13 changes: 12 additions & 1 deletion src/client/pages/Section/DataTable/Table/hooks/useParsedTable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useMemo } from 'react'

import { AssessmentName, Row, RowType, Table } from 'meta/assessment'
import { Objects } from 'utils/objects'

import { AssessmentName, Cols, Row, RowType, Table } from 'meta/assessment'
import { RecordAssessmentData } from 'meta/data'

import { useCycle } from 'client/store/assessment'
Expand All @@ -16,6 +18,7 @@ type Props = {
}

type Returned = {
firstHeaderRowSpan: number
headers: Array<string>
noticeMessages: Array<Row>
rowsData: Array<Row>
Expand Down Expand Up @@ -57,7 +60,15 @@ export const useParsedTable = (props: Props): Returned => {
withReview = withReview || row.props.withReview?.[cycle.uuid]
})

const firstColHeader = rowsHeader[0]?.cols[0]
let firstHeaderRowSpan = 0
if (!Objects.isEmpty(firstColHeader)) {
const { rowSpan } = Cols.getStyle({ col: firstColHeader, cycle })
firstHeaderRowSpan = rowSpan ?? 1
}

return {
firstHeaderRowSpan,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I understand this, it's a fix just for the first column . Let's talk later about this

headers,
noticeMessages,
rowsData,
Expand Down
Loading