@fleetbase/ember-ui/addon/styles/components/table.css

Fleetbase UI provides all the interface components, helpers, services and utilities for building a Fleetbase extension into the Console.

.table-wrapper {
    @apply sm:rounded-lg inline-block min-w-full overflow-hidden align-middle border-b border-gray-200;
}

.table-wrapper.table-native table thead tr th {
    @apply py-1;
}

.table-wrapper.table-native table tbody tr td {
    @apply py-1;
}

.table-wrapper.table-fluid {
    @apply border-none;
}

.table-wrapper.table-fluid table {
    @apply border-none;
}

.table-wrapper.table-fluid table tbody {
    @apply bg-transparent border-none;
}

.table-wrapper.table-fluid table thead tr th {
    @apply bg-transparent border-none;
}

.table-wrapper.table-fluid .ember-light-table {
    @apply w-full;
}

.table-wrapper table {
    border-top-width: 1px;
    @apply min-w-full border-gray-200;
}

.table-wrapper table tbody {
    border-top-width: 1px;
    @apply bg-white border-gray-200;
}

.table-wrapper table tbody tr td {
    @apply px-4 py-2 text-sm truncate whitespace-nowrap border-b border-gray-200 select-none;
}

.table-wrapper table tbody tr td.overflow-visible {
    overflow: visible !important;
}

.table-wrapper table tbody tr:last-child td {
    @apply border-b-0;
}

.table-wrapper table tbody tr.is-selected {
    @apply shadow select-none;
}

.table-wrapper table tbody tr.is-selected td {
    @apply bg-blue-300 select-none;
}

.table-wrapper table thead tr th {
    @apply relative px-4 py-2 text-xs font-medium leading-4 tracking-wider text-gray-500 uppercase bg-gray-50;
}

.table-wrapper table thead tr th:last-child {
    @apply border-r-0;
}

.next-table-empty-state-cell {
    padding: 0 !important;
}

.next-table-empty-state {
    @apply flex flex-col items-center justify-center px-4 py-8 mx-auto text-center;
    max-width: 34rem;
    min-height: 16rem;
}

.next-table-empty-state-compact {
    max-width: 22rem;
    min-height: 9rem;
    padding: 1.25rem 0.75rem;
}

.next-table-empty-state-icon {
    @apply flex items-center justify-center text-blue-600 bg-blue-50 border border-blue-200 rounded-md;
    width: 2.75rem;
    height: 2.75rem;
    margin-bottom: 1rem;
    font-size: 1rem;
}

.next-table-empty-state-compact .next-table-empty-state-icon {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 0.875rem;
}

.next-table-empty-state-content {
    width: 100%;
    max-width: 30rem;
}

.next-table-empty-state-title {
    @apply m-0 text-gray-900;
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.375rem;
}

.next-table-empty-state-compact .next-table-empty-state-title {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.next-table-empty-state-description {
    @apply mx-auto mt-2 text-sm text-gray-500 whitespace-normal;
    max-width: 28rem;
    line-height: 1.375rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.next-table-empty-state-compact .next-table-empty-state-description {
    font-size: 0.75rem;
    line-height: 1.125rem;
}

.next-table-empty-state-note {
    @apply mx-auto mt-2 text-xs text-gray-400 whitespace-normal;
    max-width: 28rem;
    text-align: center;
    overflow-wrap: anywhere;
}

.next-table-empty-state-actions {
    @apply flex flex-wrap items-center justify-center gap-2;
    margin-top: 1.25rem;
}

.next-table-empty-state-compact .next-table-empty-state-actions {
    gap: 0.5rem;
    margin-top: 1rem;
}

.next-table-empty-state-action {
    @apply px-3 py-1.5 mt-4 text-sm font-medium text-white bg-blue-600 rounded-md;
}

.next-table-empty-state-action:hover {
    @apply bg-blue-700;
}

.next-table-wrapper.no-table-extra-spacing.has-floating-pagination {
    padding-bottom: 0;
}

.next-table-wrapper.no-table-extra-spacing > table > tbody:after {
    height: 0;
}

.next-table-wrapper table tbody tr td .next-table-empty-state span.btn-wrapper > button.btn {
    height: auto;
    min-height: unset;
    cursor: pointer;
}

.next-table-empty-state-docs {
    margin-top: 0.875rem;
}

.next-table-empty-state-docs-action {
    @apply inline-flex items-center justify-center gap-2 px-2 py-1 text-sm font-medium text-blue-600 bg-transparent border border-transparent rounded-md;
    line-height: 1.25rem;
    cursor: pointer;
}

.next-table-empty-state-docs-action:hover {
    @apply text-blue-700 bg-blue-50 border-blue-200;
}

[data-theme='dark'] .next-table-empty-state-icon {
    color: #93c5fd;
    background: rgb(30 58 138 / 30%);
    border-color: #1e40af;
}

[data-theme='dark'] .next-table-empty-state-title {
    color: #f9fafb;
}

[data-theme='dark'] .next-table-empty-state-description {
    color: #9ca3af;
}

[data-theme='dark'] .next-table-empty-state-note {
    color: #6b7280;
}

[data-theme='dark'] .next-table-empty-state-docs-action {
    color: #bfdbfe;
}

[data-theme='dark'] .next-table-empty-state-docs-action:hover {
    color: #dbeafe;
    background: rgb(30 58 138 / 32%);
    border-color: #1e40af;
}

[data-theme='light'] .table-wrapper {
    @apply shadow-pop-least;
}

[data-theme='light'] .table-wrapper.table-fluid {
    @apply shadow-none;
}

[data-theme='light'] .table-wrapper.table-fluid table tbody tr:nth-child(even) td {
    /* background-color: #f1f2f4; */
    @apply bg-gray-100;
}

[data-theme='light'] .table-wrapper.table-fluid table tbody tr:last-child td {
    @apply border-none;
}

[data-theme='light'] .table-wrapper.table-fluid table tbody tr:hover:not(.is-expandable),
[data-theme='light'] .table-wrapper.table-fluid table tbody tr:hover:not(.is-selected) {
    @apply shadow;
}

[data-theme='light'] .table-wrapper.table-fluid table tbody tr:hover:not(.is-expandable) td,
[data-theme='light'] .table-wrapper.table-fluid table tbody tr:hover:not(.is-selected) td {
    @apply bg-white;
}

[data-theme='light'] .table-wrapper .lt-foot-wrap {
    @apply bg-gray-100;
}

[data-theme='dark'] .table-wrapper {
    @apply bg-transparent shadow;
}

[data-theme='dark'] .table-wrapper.table-boxed {
    @apply bg-transparent border-none rounded-md;
}

[data-theme='dark'] .table-wrapper.table-boxed table {
    @apply bg-transparent border border-gray-900 rounded-md shadow-md;
}

[data-theme='dark'] .table-wrapper.table-boxed tbody {
    @apply border-none;
}

[data-theme='dark'] .table-wrapper.table-boxed tbody tr td {
    @apply text-gray-400 bg-gray-800 border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-boxed thead {
    @apply border-none;
}

[data-theme='dark'] .table-wrapper.table-boxed thead tr th {
    @apply text-gray-100 bg-gray-900 border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-boxed thead tr th:last-child {
    @apply border-none;
}

[data-theme='dark'] .table-wrapper.table-native table {
    @apply border-gray-800;
}

[data-theme='dark'] .table-wrapper.table-native table thead tr th:hover {
    @apply border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-native table thead tr th:not([class*='bg-']) {
    @apply bg-gray-800;
}

[data-theme='dark'] .table-wrapper.table-native table tbody {
    @apply border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-native table tbody tr td {
    @apply text-gray-400 border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-native table tbody tr:nth-child(even):not(.is-expandable) td,
[data-theme='dark'] .table-wrapper.table-native table tbody tr:nth-child(even):not(.is-selected) td {
    @apply bg-moregray-750;
}

[data-theme='dark'] .table-wrapper.table-fluid {
    @apply shadow-none;
}

[data-theme='dark'] .table-wrapper.table-fluid table {
    @apply border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody {
    @apply border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody tr td {
    @apply text-gray-400 border-gray-900;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody tr.is-selected {
    @apply shadow-lg select-none;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody tr.is-selected td {
    @apply text-blue-900 bg-blue-500 border-blue-600;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody tr.is-selected td a {
    @apply text-blue-900;
}

[data-theme='dark'] .table-wrapper.table-fluid table thead tr th:hover {
    @apply text-white;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody tr:nth-child(even):not(.is-selected) td {
    @apply bg-moregray-750;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody tr:hover:nth-child(even):not(.is-selected),
[data-theme='dark'] .table-wrapper.table-fluid table tbody tr:hover:not(.is-selected) {
    @apply shadow-lg;
}

[data-theme='dark'] .table-wrapper.table-fluid table tbody tr:hover:nth-child(even):not(.is-selected) td,
[data-theme='dark'] .table-wrapper.table-fluid table tbody tr:hover:not(.is-selected) td {
    @apply bg-moregray-850;
}

[data-theme='dark'] .table-wrapper.table-fluid table thead tr th {
    @apply border-gray-700;
}

[data-theme='dark'] .table-wrapper.table-fluid .lt-foot-wrap {
    @apply text-gray-400 bg-gray-800 border-gray-900;
}

table.sub-table tbody tr {
    border-bottom: 0px;
    border: 0px;
}

table.sub-table tbody tr td {
    border-bottom: 0px;
}

table.sub-table tbody tr:hover {
    box-shadow: none !important;
}

.table-spaced-y-1 {
    border-collapse: separate;
    border-spacing: 0 0.25rem;
}

.table-spaced-y-2 {
    border-collapse: separate;
    border-spacing: 0 0.5rem;
}

.table-spaced-y-3 {
    border-collapse: separate;
    border-spacing: 0 0.75rem;
}

.table-spaced-y-4 {
    border-collapse: separate;
    border-spacing: 0 1rem;
}

.table-cells-valign-top td,
.table-cells-valign-top th {
    vertical-align: top;
}

.next-table-wrapper table .resizer,
table .resizer {
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    cursor: col-resize;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

.next-table-wrapper table .resizer.resizer:hover,
table .resizer.resizer:hover,
.next-table-wrapper table .resizer.resizing,
table .resizer.resizing {
    @apply border-r-4 border-solid border-blue-500 border-opacity-60;
}

body[data-theme='dark'] .table-wrapper.table-fluid > .next-table-wrapper > table > tbody > tr.expandable-row.is-expanded > td,
body[data-theme='dark'] .table-wrapper.table-fluid > .next-table-wrapper > table > tbody > tr.expandable-row:hover > td,
.next-table-wrapper table > tbody > tr.expandable-row.is-expanded > td,
.next-table-wrapper table > tbody > tr.expandable-row:hover > td,
table > tbody > tr.expandable-row.is-expanded > td,
table > tbody > tr.expandable-row:hover > td {
    @apply bg-blue-500 text-blue-900 border-y border-blue-600;
}

body[data-theme='dark'] .next-table-wrapper > table.is-expandable > tbody > tr.expandable-row:nth-child(even) > td {
    @apply bg-gray-800;
}

.next-table-wrapper > table.is-expandable > tbody > tr.expandable-row:nth-child(even) > td {
    @apply bg-gray-200;
}

table > tbody > tr.expandable-row + tr.expanded-row {
    display: none;
}

table > tbody > tr.expandable-row.is-expanded + tr.expanded-row {
    display: table-row;
}

body[data-theme='dark'] .table-wrapper.table-fluid > .next-table-wrapper > table.is-expandable > tbody > tr.expandable-row > td a.next-dd-item,
.table-wrapper.table-fluid > .next-table-wrapper > table.is-expandable > tbody > tr.expandable-row > td a.next-dd-item,
.next-table-wrapper table.is-expandable > tbody > tr.expandable-row.is-expanded > td a.next-dd-item {
    @apply text-white;
}

body[data-theme='light'] .next-table-wrapper.auto-height,
body[data-theme='dark'] .next-table-wrapper.auto-height,
.next-table-wrapper.auto-height {
    height: auto;
}

body[data-theme='light'] .next-table-wrapper.auto-height > table,
body[data-theme='dark'] .next-table-wrapper.auto-height > table,
.next-table-wrapper.auto-height > table {
    height: auto;
}
body[data-theme='light'] .next-table-wrapper.auto-height > table > tbody:after,
body[data-theme='dark'] .next-table-wrapper.auto-height > table > tbody:after,
.next-table-wrapper.auto-height > table > tbody:after {
    height: 0;
}

body[data-theme='light'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:first-child,
body[data-theme='dark'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:first-child,
.next-table-wrapper.auto-height > table > tbody > tr:last-child > td:first-child {
    border-bottom-left-radius: 0.25rem;
}

body[data-theme='light'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:last-child,
body[data-theme='dark'] .next-table-wrapper.rounded-b > table > tbody > tr:last-child > td:last-child,
.next-table-wrapper.auto-height > table > tbody > tr:last-child > td:last-child {
    border-bottom-right-radius: 0.25rem;
}

/* Sortable column styles */
.table-wrapper table thead tr th.is-sortable {
    @apply cursor-pointer select-none;
}

.table-wrapper table thead tr th .th-inner-wrapper {
    @apply flex items-center justify-between;
}

.table-wrapper table thead tr th .th-content {
    @apply flex-grow;
}

.table-wrapper table thead tr th .sort-icon-wrapper {
    @apply ml-2 flex items-center gap-1 text-gray-400;
}

.table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
    @apply font-semibold text-blue-500 bg-blue-100 rounded-full flex items-center justify-center;
    height: 0.75rem;
    width: 0.75rem;
    font-size: 0.5rem;
    line-height: 0.5rem;
}

.table-wrapper table thead tr th .sort-icon-wrapper > div:last-child {
    @apply w-4 h-4 flex flex-col items-center justify-center;
}

.table-wrapper table thead tr th .sort-icon-wrapper > .sort-icon:first-child {
    margin-bottom: -7px;
}

.table-wrapper table thead tr th .sort-icon {
    @apply text-gray-400;
}

.table-wrapper table thead tr th:hover .sort-icon {
    @apply text-gray-300;
}

.table-wrapper table thead tr th .sort-icon.is-ascending,
.table-wrapper table thead tr th .sort-icon.is-descending {
    @apply text-blue-400;
}

.next-table-wrapper table thead tr th.is-sortable {
    @apply cursor-pointer select-none;
}

.next-table-wrapper table thead tr th .th-inner-wrapper {
    @apply flex items-center justify-between;
}

.next-table-wrapper table thead tr th .th-content {
    @apply flex-grow;
}

.next-table-wrapper table thead tr th .sort-icon-wrapper {
    @apply ml-2 flex items-center gap-1 text-gray-400;
}

.next-table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
    @apply font-semibold text-blue-500 bg-blue-100 rounded-full flex items-center justify-center;
    height: 0.75rem;
    width: 0.75rem;
    font-size: 0.5rem;
    line-height: 0.5rem;
}

.next-table-wrapper table thead tr th .sort-icon-wrapper > div:last-child {
    @apply w-4 h-4 flex flex-col items-center justify-center;
}

.next-table-wrapper table thead tr th .sort-icon-wrapper .sort-icon:first-child {
    margin-bottom: -7px;
}

.next-table-wrapper table thead tr th .sort-icon {
    @apply text-gray-400;
}

.next-table-wrapper table thead tr th:hover .sort-icon {
    @apply text-gray-300;
}

.next-table-wrapper table thead tr th .sort-icon.is-ascending,
.next-table-wrapper table thead tr th .sort-icon.is-descending {
    @apply text-blue-400;
}

/* Dark theme sortable column styles */
[data-theme='dark'] .table-wrapper table thead tr th .sort-icon {
    @apply text-gray-400;
}

[data-theme='dark'] .table-wrapper table thead tr th:hover .sort-icon {
    @apply text-gray-100;
}

[data-theme='dark'] .table-wrapper table thead tr th .sort-icon.is-ascending,
[data-theme='dark'] .table-wrapper table thead tr th .sort-icon.is-descending {
    @apply text-blue-400;
}

[data-theme='dark'] .table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
    @apply text-blue-100 bg-blue-900;
}

[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon {
    @apply text-gray-400;
}

[data-theme='dark'] .next-table-wrapper table thead tr th:hover .sort-icon {
    @apply text-gray-100;
}

[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon.is-ascending,
[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon.is-descending {
    @apply text-blue-400;
}

[data-theme='dark'] .next-table-wrapper table thead tr th .sort-icon-wrapper > .sort-priority-badge {
    @apply text-blue-100 bg-blue-900;
}

/* Floating pagination styles */
div.has-floating-pagination,
.next-table-wrapper.has-floating-pagination {
    @apply relative pb-16;
}

div.has-floating-pagination .floating-pagination,
.next-table-wrapper .floating-pagination {
    @apply fixed bottom-4 right-4 z-50;
    @apply bg-white dark:bg-gray-800;
    @apply rounded-lg shadow-lg;
    @apply border border-gray-200 dark:border-gray-700;
    padding: 0.25rem 0.5rem;
}

/* Remove default pagination padding when floating */
div.has-floating-pagination .floating-pagination .fleetbase-pagination,
.next-table-wrapper .floating-pagination .fleetbase-pagination {
    @apply p-0;
}

/* Add spacing between meta info and buttons */
div.has-floating-pagination .floating-pagination .fleetbase-pagination-meta-info,
.next-table-wrapper .floating-pagination .fleetbase-pagination-meta-info {
    margin-right: 0.75rem;
}

/* Thin horizontal scrollbar to match vertical scrollbar */
.next-table-wrapper::-webkit-scrollbar {
    height: 8px; /* Match thin vertical scrollbar */
}

.next-table-wrapper::-webkit-scrollbar-track {
    @apply bg-gray-100 dark:bg-gray-700;
    @apply rounded;
}

.next-table-wrapper::-webkit-scrollbar-thumb {
    @apply bg-gray-400 dark:bg-gray-500;
    @apply rounded;
}

.next-table-wrapper::-webkit-scrollbar-thumb:hover {
    @apply bg-gray-500 dark:bg-gray-400;
}

/* Firefox thin scrollbar */
.next-table-wrapper {
    scrollbar-width: thin;
    scrollbar-color: rgb(156 163 175) rgb(243 244 246); /* gray-400 gray-100 */
}

[data-theme='dark'] .next-table-wrapper {
    scrollbar-color: rgb(107 114 128) rgb(55 65 81); /* gray-500 gray-700 */
}