Files
signoz/frontend/src/components/TanStackTableView/TanStackTable.module.scss
Vinicius Lourenço b55ae83993
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
Release Drafter / update_release_draft (push) Has been cancelled
feat(tanstack-table): promote logs table component to /components (#10946)
* refactor(tanstack): move table to components & convert to css modules

* refactor(table): extract table to own component

* refactor(table): optimize

* chore(tests): cleanup tests and components

* fix(styles): minor fixes on styles

* fix(tests): use find by text

* fix(row): missing active styles

* refactor(tanstack-table): refine component based on infra monitoring

* docs(tanstacktable): add more docs about usage

* refactor(table): cleanup and fixes related to column and old preferences of logs

* refactor(table): more cleanup

* refactor(table): removed deprecated api

* fix(tanstack): more cleanup

* fix(sonner): removed old dependency

* fix(resizing): better resizing support

* fix(tanstack-header-row): use our version of popover

* fix(column-view): remove unused file

* fix(oxlint): alerts and issues

* fix(test): rollback aria-sort and rename to data-sort
2026-04-24 10:44:13 +00:00

101 lines
1.8 KiB
SCSS

.tanStackTable {
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(--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: 0.3rem;
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(--l2-foreground);
}
.tableRow {
cursor: pointer;
position: relative;
overflow-anchor: none;
&:hover {
.tableCell {
background-color: var(--row-hover-bg) !important;
}
}
&.tableRowActive {
.tableCell {
background-color: var(--row-active-bg) !important;
}
}
}
.tableHeaderCell {
padding: 0.3rem;
height: 36px;
text-align: left;
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: 18px;
letter-spacing: -0.07px;
color: var(--l1-foreground);
// TODO: Remove this once background color (l1) is matching the actual background color of the page
&[data-dark-mode='true'] {
background: #0b0c0d;
}
&[data-dark-mode='false'] {
background: #fdfdfd;
}
}
.tableRowExpansion {
display: table-row;
}
.tableCellExpansion {
padding: 0.5rem;
vertical-align: top;
}