mirror of
https://github.com/SigNoz/signoz.git
synced 2026-08-25 14:00:55 +01:00
fe68b8e8b7
Some checks failed
build-staging / prepare (push) Has been cancelled
build-staging / js-build (push) Has been cancelled
build-staging / go-build (push) Has been cancelled
build-staging / staging (push) Has been cancelled
cacheci / tests (push) Has been cancelled
Release Drafter / update_release_draft (push) Has been cancelled
<!--A few plain bullets saying what changed and why, for a reviewer skimming it - not a wall of text, not a restatement of the diff, not generated boilerplate.--> #### Description - moved list view from antd `ResizeTable` to Tanstack table. functionalities kept same. - pulled out a reusable trace table. new shared table + per field column builder. This is added to keep the table renderer common for both ListView and Trace View because they do not need to be different. Trace view will integrate this component in following stacked PR. - two new override vars on `TanStackTableView` (header height, first column header padding) <!--Reference issues using `Closes #issue-number` to enable automatic closure on merge. --> #### Issues closed by this PR Part of https://github.com/SigNoz/engineering-pod/issues/5052 <!--If applicable, include screenshots or screen recordings that clearly show the behavior before the change and the result after the change. --> #### Screenshots / Screen Recordings https://github.com/user-attachments/assets/d3a75b38-7cf5-4ab0-a7b4-fce404a03e63 <!--Anything reviewers should keep in mind while reviewing --> #### Additional Information - Touches the shared `TanStackTableView` component.. two new override vars, defaults unchanged for other tables. cc. @H4ad <!--Please delete paragraphs that you did not use before submitting.-->
211 lines
4.7 KiB
SCSS
211 lines
4.7 KiB
SCSS
.tanStackTable {
|
|
--tanstack-cell-padding: var(--tanstack-cell-padding-override, 0.3rem);
|
|
--tanstack-cell-padding-left: var(
|
|
--tanstack-cell-padding-left-override,
|
|
var(--tanstack-cell-padding)
|
|
);
|
|
--tanstack-cell-padding-right: var(
|
|
--tanstack-cell-padding-right-override,
|
|
var(--tanstack-cell-padding)
|
|
);
|
|
--tanstack-cell-padding-top: var(
|
|
--tanstack-cell-padding-top-override,
|
|
var(--tanstack-cell-padding)
|
|
);
|
|
--tanstack-cell-padding-bottom: var(
|
|
--tanstack-cell-padding-bottom-override,
|
|
var(--tanstack-cell-padding)
|
|
);
|
|
|
|
width: 100%;
|
|
border-collapse: separate;
|
|
border-spacing: 0;
|
|
table-layout: fixed;
|
|
|
|
& td,
|
|
& th {
|
|
overflow: hidden;
|
|
min-width: 0;
|
|
box-sizing: border-box;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
|
|
.tableCellText {
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
letter-spacing: -0.07px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
width: auto;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: var(--tanstack-plain-body-line-clamp, 1);
|
|
line-clamp: var(--tanstack-plain-body-line-clamp, 1);
|
|
font-size: var(--tanstack-plain-cell-font-size, 14px);
|
|
line-height: var(--tanstack-plain-cell-line-height, 18px);
|
|
color: var(--tanstack-table-cell-color, var(--l2-foreground));
|
|
max-width: 100%;
|
|
word-break: break-all;
|
|
}
|
|
|
|
.tableViewRowActions {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 8px;
|
|
left: auto;
|
|
transform: translateY(-50%);
|
|
margin: 0;
|
|
z-index: 5;
|
|
}
|
|
|
|
.tableCell {
|
|
padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
|
|
var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
|
|
height: var(--tanstack-table-row-height, auto);
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
letter-spacing: -0.07px;
|
|
font-size: var(--tanstack-plain-cell-font-size, 14px);
|
|
line-height: var(--tanstack-plain-cell-line-height, 18px);
|
|
color: var(--tanstack-table-cell-color, var(--l2-foreground));
|
|
background-color: var(--tanstack-table-cell-bg, transparent);
|
|
|
|
&:first-child {
|
|
padding: var(
|
|
--tanstack-cell-padding-top-first-column,
|
|
var(--tanstack-cell-padding-top)
|
|
)
|
|
var(
|
|
--tanstack-cell-padding-right-first-column,
|
|
var(--tanstack-cell-padding-right)
|
|
)
|
|
var(
|
|
--tanstack-cell-padding-bottom-first-column,
|
|
var(--tanstack-cell-padding-bottom)
|
|
)
|
|
var(
|
|
--tanstack-cell-padding-left-first-column,
|
|
var(--tanstack-cell-padding-left)
|
|
);
|
|
}
|
|
}
|
|
|
|
.tableRow {
|
|
cursor: pointer;
|
|
position: relative;
|
|
overflow-anchor: none;
|
|
|
|
&:hover {
|
|
.tableCell {
|
|
background-color: var(
|
|
--tanstack-table-row-hover-bg,
|
|
var(--row-hover-bg)
|
|
) !important;
|
|
}
|
|
}
|
|
|
|
&.tableRowActive {
|
|
.tableCell {
|
|
background-color: var(
|
|
--tanstack-table-row-active-bg,
|
|
var(--row-active-bg)
|
|
) !important;
|
|
}
|
|
}
|
|
|
|
&.tableRowOdd {
|
|
.tableCell {
|
|
background-color: var(--tanstack-table-row-odd-bg, transparent);
|
|
}
|
|
}
|
|
|
|
&.tableRowEven {
|
|
.tableCell {
|
|
background-color: var(--tanstack-table-row-even-bg, transparent);
|
|
}
|
|
}
|
|
|
|
.tableCell:first-child {
|
|
background-color: var(
|
|
--tanstack-first-column-bg,
|
|
var(--tanstack-table-cell-bg, transparent)
|
|
);
|
|
color: var(
|
|
--tanstack-first-column-color,
|
|
var(--tanstack-table-cell-color, var(--l2-foreground))
|
|
);
|
|
}
|
|
|
|
&.tableRowOdd .tableCell:first-child {
|
|
background-color: var(
|
|
--tanstack-first-column-odd-bg,
|
|
var(
|
|
--tanstack-first-column-bg,
|
|
var(--tanstack-table-row-odd-bg, transparent)
|
|
)
|
|
);
|
|
}
|
|
|
|
&.tableRowEven .tableCell:first-child {
|
|
background-color: var(
|
|
--tanstack-first-column-even-bg,
|
|
var(
|
|
--tanstack-first-column-bg,
|
|
var(--tanstack-table-row-even-bg, transparent)
|
|
)
|
|
);
|
|
}
|
|
}
|
|
|
|
.tableHeaderCell {
|
|
padding: var(--tanstack-cell-padding-top) var(--tanstack-cell-padding-right)
|
|
var(--tanstack-cell-padding-bottom) var(--tanstack-cell-padding-left);
|
|
height: var(--tanstack-table-header-height, 36px);
|
|
text-align: left;
|
|
font-size: 14px;
|
|
font-style: normal;
|
|
font-weight: 400;
|
|
line-height: 18px;
|
|
letter-spacing: -0.07px;
|
|
color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
|
|
background: var(--tanstack-table-header-cell-bg, var(--l1-background));
|
|
border-bottom: 1px solid var(--tanstack-table-header-border-color, transparent);
|
|
}
|
|
|
|
.tableRowExpansion {
|
|
display: table-row;
|
|
|
|
.tableCellExpansion {
|
|
background-color: var(--tanstack-table-header-cell-bg, var(--l1-background));
|
|
color: var(--tanstack-table-header-cell-color, var(--l1-foreground));
|
|
}
|
|
|
|
& > td {
|
|
padding: 0;
|
|
}
|
|
|
|
& thead th:first-child {
|
|
padding-left: var(
|
|
--tanstack-expansion-first-col-padding-left,
|
|
calc(var(--spacing-3) - 1px)
|
|
);
|
|
}
|
|
|
|
& tbody td:first-child {
|
|
padding-left: var(
|
|
--tanstack-expansion-first-col-padding-left,
|
|
calc(var(--spacing-20) + var(--spacing-4))
|
|
);
|
|
}
|
|
|
|
:global(thead) {
|
|
position: unset !important;
|
|
}
|
|
}
|
|
|
|
.tableCellExpansion {
|
|
padding: 0.5rem;
|
|
vertical-align: top;
|
|
}
|