@siberiaweb/components/lib/example-styles/grid.css

Веб-компоненты.

/*
    Сетка.

    Требуется <link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">
 */
.sw-grid {
    color: #333333;
    font-size: 14px;
    font-weight: normal;
    outline: 1px solid #cccccc;
    transition: opacity ease-in-out 0.5s;
    --sw-grid_data-scroll-margin-top: 0;
}

.sw-grid table {
    border-spacing: 0;
    table-layout: fixed;
}

.sw-grid td {
    background-color: white;
    outline: 1px solid #cccccc;
}

.sw-grid thead td {
    font-weight: 600;
    height: 50px;
    padding: 6px;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sw-grid tbody tr {
    scroll-margin-bottom: -1px;
    scroll-margin-top: var( --sw-grid_data-scroll-margin-top );
}

.sw-grid tbody td {
    scroll-margin-bottom: -1px;
    scroll-margin-top: var( --sw-grid_data-scroll-margin-top );
}

.sw-grid tr td:last-child {
    width: 100% !important;
}

.sw-grid .sw-grid_col-resize-border {
    transform: translateX( -1px );
}

.sw-grid .sw-grid_data-cell-content {
    padding: 6px;
}

.sw-grid .sw-grid_selected-cell,
.sw-grid .sw-grid_selected-row td {
    background-color: steelblue;
    color: white;
}

.sw-grid .sw-grid_sort-indicator {
    display: none;
    font-family: "Material Icons", sans-serif;
    font-size: 26px;
    font-weight: normal;
    height: 16px;
    left: 50%;
    pointer-events: none;
    position: absolute;
    top: 100%;
    transform: translateX( -50% ) translateY( -100% );
    width: 16px;
}

.sw-grid .sw-grid_sort .sw-grid_sort-indicator {
    display: flex;
}

.sw-grid .sw-grid_sort-asc .sw-grid_sort-indicator::after {
    content: "arrow_drop_up";
}

.sw-grid .sw-grid_sort-desc .sw-grid_sort-indicator::after {
    content: "arrow_drop_down";
}

@keyframes sw-grid_load-indicator {
    0% {
        transform: rotate( 0deg );
    }
    100% {
        transform: rotate( 360deg );
    }
}

.sw-grid .sw-grid_load-indicator {
    align-items: center;
    background-color: rgba( 0, 0, 0, 0.02 );
    display: flex;
    justify-content: center;
}

.sw-grid .sw-grid_load-indicator::after {
    animation: sw-grid_load-indicator 1s linear infinite;
    border: 4px solid steelblue;
    border-radius: 100%;
    border-top-color: transparent;
    content: "";
    height: 48px;
    width: 48px;
}

.sw-grid .sw-grid_col-drop-icon-above::after {
    color: black;
    content: "south";
    font-family: "Material icons", sans-serif;
    font-size: 24px;
    font-weight: normal;
    transform: translateY( 1px );
}

.sw-grid .sw-grid_col-drop-icon-below::after {
    color: black;
    content: "north";
    font-family: "Material icons", sans-serif;
    font-size: 24px;
    font-weight: normal;
    transform: translateY( -2px );
}

.sw-grid .sw-grid_col-drag-image {
    background-color: ghostwhite;
    border: 1px solid #aaaaaa;
    min-width: 100px;
    padding: 6px;
}

.sw-grid[ empty ]::after {
    align-items: center;
    content: "Нет данных для отображения";
    display: flex;
    flex-grow: 1;
    font-size: 13px;
    font-weight: normal;
    color: #555555;
    justify-content: center;
    position: sticky;
    top: 0;
    left: 0;
}