pocketbase/ui/src/scss/_table.scss

table {
    --entranceAnimationSpeed: 0.3s;

    border-collapse: separate;
    min-width: 100%;
    transition: opacity var(--baseAnimationSpeed);
    .form-field {
        margin: 0;
        line-height: 1;
        text-align: left;
    }
    .txt-ellipsis {
        flex-shrink: 0;
    }
    td, th {
        outline: 0;
        vertical-align: middle;
        position: relative;
        text-align: left;
        padding: 10px;
        border-bottom: 1px solid var(--baseAlt2Color);
        &:first-child {
            padding-left: 20px;
        }
        &:last-child {
            padding-right: 20px;
        }
    }
    th {
        color: var(--txtHintColor);
        font-weight: 600;
        font-size: 1rem;
        user-select: none;
        height: 50px;
        line-height: var(--smLineHeight);
        i {
            font-size: inherit;
        }
    }
    td {
        height: 60px;
        word-break: break-word;
    }

    .min-width {
        width: 1% !important;
        white-space: nowrap;
    }
    .nowrap {
        white-space: nowrap;
    }

    .col-sort {
        $pos: 10px;
        $iconSize: 25px;
        cursor: pointer;
        border-top-left-radius: var(--baseRadius);
        border-top-right-radius: var(--baseRadius);
        padding-right: $iconSize + $pos - 5;
        transition: color var(--baseAnimationSpeed),
                    background var(--baseAnimationSpeed);
        &:after {
            // content: '\ea74';
            content: '\ea4c';
            position: absolute;
            right: $pos;
            top: 50%;
            margin-top: -($iconSize * 0.5);
            line-height: $iconSize;
            height: $iconSize;
            font-family: var(--iconFontFamily);
            font-weight: normal;
            color: var(--txtHintColor);
            opacity: 0;
            transition: color var(--baseAnimationSpeed),
                        opacity var(--baseAnimationSpeed);
        }
        &.sort-desc:after {
            content: '\ea4c';
        }
        &.sort-asc:after {
            content: '\ea76';
        }
        &.sort-active {
            &:after {
                opacity: 1;
            }
        }
        &:hover,
        &:focus-visible {
            background: var(--baseAlt1Color);
            &:after {
                opacity: 1;
            }
        }
        &:active {
            transition-duration: var(--activeAnimationSpeed);
            background: var(--baseAlt2Color);
        }
        &.col-sort-disabled {
            cursor: default;
            background: none;
            &:after {
                display: none;
            }
        }
    }

    .col-header-content {
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        gap: 5px;
        .txt {
            max-width: 140px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    // column types
    %minColWidth {
        width: 1% !important;
        white-space: nowrap;
    }
    .col-type-action {
        @extend %minColWidth;
        white-space: nowrap;
        text-align: right;
        color: var(--txtHintColor);
        i {
            display: inline-block;
            vertical-align: top;
            transition: transform var(--baseAnimationSpeed);
        }
    }
    td.col-type-json {
        font-family: monospace;
        font-size: var(--smFontSize);
        line-height: var(--smLineHeight);
        max-width: 300px;
    }
    .col-type-text {
        max-width: 300px;
    }
    .col-type-editor {
        min-width: 250px;
    }
    .col-type-select {
        min-width: 150px;
    }
    .col-type-email {
        min-width: 120px;
        white-space: nowrap;
    }
    .col-type-file {
        min-width: 100px;
    }

    // field name specific columns
    td.col-field-id,
    td.col-field-username {
        width: 0;
        white-space: nowrap;
    }
    .col-field-created,
    .col-field-updated {
        @extend %minColWidth;
    }

    tr {
        outline: 0;
        background: var(--bodyColor);
        transition: background var(--baseAnimationSpeed);
    }
    tr.row-handle {
        cursor: pointer;
        user-select: none;
        &:focus-visible,
        &:hover,
        &:active {
            background: var(--baseAlt1Color);
            .action-col {
                color: var(--txtPrimaryColor);
                i {
                    transform: translateX(3px);
                }
            }
        }
        &:active {
            transition-duration: var(--activeAnimationSpeed);
        }
    }

    // styles
    &.table-border {
        border: 1px solid var(--baseAlt2Color);
        border-radius: var(--baseRadius);
        tr {
            background: var(--baseColor);
        }
        td, th {
            height: 45px;
        }
        th {
            background: var(--baseAlt1Color);
        }
        > :last-child > :last-child {
            th, td {
                border-bottom: 0;
            }
        }
        > tr:first-child,
        > :first-child > tr:first-child {
            > :first-child {
                border-top-left-radius: var(--baseRadius);
            }
            > :last-child {
                border-top-right-radius: var(--baseRadius);
            }
        }
        > tr:last-child,
        > :last-child > tr:last-child {
            > :first-child {
                border-bottom-left-radius: var(--baseRadius);
            }
            > :last-child {
                border-bottom-right-radius: var(--baseRadius);
            }
        }
    }
    &.table-compact {
        td, th {
            height: auto;
        }
    }

    // states
    &.table-animate {
        tr {
            animation: entranceTop var(--entranceAnimationSpeed);
        }
    }
    &.table-loading {
        pointer-events: none;
        opacity: 0.7;
    }
}

.table-wrapper {
    width: auto;
    padding: 0;
    max-width: calc(100% + 2*var(--baseSpacing));
    margin-left: calc(var(--baseSpacing) * -1);
    margin-right: calc(var(--baseSpacing) * -1);
    .bulk-select-col {
        min-width: 70px;
    }
    td, th {
        position: relative;
        &:first-child {
            padding-left: calc(var(--baseSpacing) + 3px);
        }
        &:last-child {
            padding-right: calc(var(--baseSpacing) + 3px);
        }
    }

    // horizontal scrolling
    .bulk-select-col,
    .col-type-action {
        position: sticky;
        z-index: 99;
        transition: box-shadow var(--baseAnimationSpeed);
    }
    .bulk-select-col {
        left: 0px;
    }
    .col-type-action {
        right: 0;
    }
    .bulk-select-col,
    .col-type-action {
        background: inherit;
    }
    th.bulk-select-col,
    th.col-type-action {
        background: var(--bodyColor);
    }

    // scrolling styles
    &.scrollable {
        .bulk-select-col {
            box-shadow: 3px 0px 5px 0px var(--shadowColor);
        }
        .col-type-action {
            box-shadow: -3px 0px 5px 0px var(--shadowColor);
        }
        &.scroll-start .bulk-select-col,
        &.scroll-end .col-type-action {
            box-shadow: none;
        }
    }
}