@mussonindustrial/pyro-mui-joy/src/components/table.css

A port of Material UI Joy Theme for Ignition by Inductive Automation

/* Table Filter */
.ia_tableComponent__filterContainer {
    @include variant-support(TableFilter);

    /* Apply component properties */
    color: var(--joy-TableFilter-Color);
    background-color: var(
        --joy-TableFilter-Bg,
        var(--joy-palette-background-level1)
    );
    border-color: var(--joy-TableFilter-Border);
    border-width: var(--joy-TableFilter-borderWidth);
    border-style: var(--joy-TableFilter-borderStyle);
    border-radius: var(--joy-TableFilter-radius);

    /* Input Field */
    .ia_inputField {
        @include variant-forced(Input, outlined);
    }
}

.table-container .tableFilter .filterCommon {
    height: min-content !important;
}

.ia_tableComponent {
    border: none !important;
}

/* Table */
.ia_table {
    @include variant-support(Table);
    @include variant-support(TableCell);
    --joy-Table-headerUnderlineThickness: 2px;
    --joy-TableCell-borderColor: var(--joy-palette-divider);
    --joy-TableCell-headBackground: var(
        --joy-Sheet-background,
        var(--joy-palette-background-surface)
    );
    --joy-unstable_TableCell-height: var(--joy-TableCell-height, 40px);
    --joy-TableCell-paddingX: 0.5rem;
    --joy-TableCell-paddingY: 0.375rem;
    table-layout: fixed;
    width: 100%;
    border-spacing: 0px;
    border-collapse: separate;
    border-radius: var(
        --joy-TableCell-cornerRadius,
        var(--joy-unstable_actionRadius)
    );
    font-family: var(
        --joy-fontFamily-body,
        'Inter',
        var(
            --joy-joy-fontFamily-fallback,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            Roboto,
            Helvetica,
            Arial,
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji',
            'Segoe UI Symbol'
        )
    );
    font-size: var(--joy-fontSize-sm, 0.875rem);
    line-height: var(--joy-lineHeight-md, 1.5);
    background-color: transparent;
    color: var(
        --joy-variant-plainColor,
        var(
            --joy-palette-neutral-plainColor,
            var(--joy-palette-neutral-700, #32383e)
        )
    );
    --joy-variant-borderWidth: 0px;

    &__body {
        background-color: transparent;
    }
}

.ia_table__headContainer,
.ia_table__footContainer {
    /* text-align: left; */
    padding: var(--joy-TableCell-paddingY) var(--joy-TableCell-paddingX);
    background-color: var(--joy-TableCell-headBackground);
    height: var(--joy-unstable_TableCell-height);
    font-weight: var(--joy-fontWeight-lg);
    border-color: var(--joy-TableCell-borderColor);
    color: var(--joy-palette-text-secondary);
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    border-bottom-width: var(--joy-Table-headerUnderlineThickness);
    border-bottom-style: solid;
}

.ia_table__foot,
.ia_table__head {
    font-weight: var(--joy-fontWeight-lg);
    font-size: var(--joy-fontSize-sm);
}

/* .ia_table__head__header__sort {
    color: var(--joy-neutral-50);
}

.ia_table__head__header__sort--joy-active {
    color: var(--joy-callToAction--joy-active);
}

.ia_table__body__row--joy-even {
    background-color: var(--joy-neutral-10);
}

.ia_table__body__row--joy-odd {
    background-color: var(--joy-neutral-20);
}

.ia_table__body__emptyMessage {
    color: var(--joy-neutral-60);
}

.ia_table__resizeGuide {
    background-color: var(--joy-callToAction);
    opacity: 0.5;
}

.ia_table__activeColumnOverlay {
    background-color: currentColor;
    opacity: 0.4;
}

.ia_table__draggingColumnPlaceholderOverlay {
    background-color: currentColor;
    opacity: 0.2;
}

.ia_table__positionGuide {
    background-color: currentColor;
    opacity: 0.6;
} */