vuestic-ui/dist/esm-node/VaDataTable.css

Vue 3 UI Framework

.va-data-table {
  --va-data-table-cell-padding: 0.625rem;
  --va-data-table-thead-line-height: 1.6;
  --va-data-table-thead-font-size: 0.625rem;
  --va-data-table-thead-font-weight: 700;
  --va-data-table-thead-text-transform: uppercase;
  --va-data-table-thead-letter-spacing: 0.6px;
  --va-data-table-thead-border: 1px solid var(--va-background-border);
  --va-data-table-tfoot-border: unset;
  --va-data-table-height: unset;
  --va-data-table-max-height: unset;
  --va-data-table-thead-color: currentColor;
  --va-data-table-tfoot-color: currentColor;
  --va-data-table-header-background: var(--va-background-primary);
  /* Hover */
  --va-data-table-hover-th-opacity: 0.3;
  /* Striped */
  --va-data-table-striped-tr-background-color: var(--va-background-element);
  --va-data-table-striped-tr-opacity: 1;
  /* Selectable */
  --va-data-table-selectable-tr-cursor: pointer;
  --va-data-table-selectable-cell-width: 55px;
  --va-data-table-selectable-cell-vertical-align: middle;
  --va-data-table-selectable-cell-text-align: center;
  /* No-data */
  --va-data-table-no-data-text-align: center;
  --va-data-table-no-data-vertical-align: middle;
  /* Animated */
  --va-data-table-transition: var(--va-transition);
  /* Grid */
  --va-data-table-grid-tbody-gap: 0.5rem;
  --va-data-table-grid-tbody-margin-top: 1rem;
  --va-data-table-grid-tr-padding: 1rem;
  --va-data-table-grid-tr-border-radius: 0.5rem;
  --va-data-table-grid-tr-border: 1px solid var(--va-background-border);
  --va-data-table-grid-tr-header-font-weight: 600;
  --va-data-table-grid-tr-header-color: var(--va-text-primary);
}
.va-data-table {
  --va-data-table-selected-color: var(--va-css-variables-selected-color);
  --va-data-table-hover-color: var(--va-css-variables-hover-color);
  --va-data-table-height--computed: var(--va-css-variables-table-height);
  --va-data-table-thead-background--computed: var(--va-css-variables-thead-bg);
  --va-data-table-tfoot-background--computed: var(--va-css-variables-tfoot-bg);
  --va-data-table-grid-tbody-columns: 4;
  min-width: unset;
  font-family: var(--va-font-family);
}
@media (max-width: 1199.98px) {
.va-data-table {
    --va-data-table-grid-tbody-columns: 3;
}
}
@media (max-width: 991.98px) {
.va-data-table {
    --va-data-table-grid-tbody-columns: 2;
}
}
@media (max-width: 767.98px) {
.va-data-table {
    --va-data-table-grid-tbody-columns: 1;
}
}
.va-data-table:not(.va-data-table--virtual-scroller) {
  overflow-x: auto;
  overflow-y: hidden;
}
.va-data-table--sticky:not(.va-data-table--virtual-scroller), .va-data-table--scroll {
  overflow-y: auto;
  height: var(--va-data-table-height--computed);
  max-height: var(--va-data-table-max-height);
}
.va-data-table .va-data-table__table {
  width: 100%;
  cursor: default;
  white-space: nowrap;
}
.va-data-table .va-data-table__table .va-data-table__table-thead {
  color: var(--va-data-table-thead-color);
  border-bottom: var(--va-data-table-thead-border);
}
.va-data-table .va-data-table__table .va-data-table__table-thead th {
  border-bottom: none;
}
.va-data-table .va-data-table__table .va-data-table__table-thead--sticky {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--va-data-table-thead-background--computed);
}
.va-data-table .va-data-table__table .va-data-table__table-tbody .no-data {
  text-align: var(--va-data-table-no-data-text-align);
  vertical-align: var(--va-data-table-no-data-vertical-align);
  width: 100%;
}
.va-data-table .va-data-table__table .va-data-table__table-tfoot {
  color: var(--va-data-table-tfoot-color);
  border-top: var(--va-data-table-tfoot-border, var(--va-data-table-thead-border));
}
.va-data-table .va-data-table__table .va-data-table__table-tfoot th {
  border-bottom: none;
}
.va-data-table .va-data-table__table .va-data-table__table-tfoot--sticky {
  position: sticky;
  bottom: 0;
  z-index: 1;
  background: var(--va-data-table-tfoot-background--computed);
}
.va-data-table .va-data-table__table .va-data-table__table-td {
  padding: var(--va-data-table-cell-padding);
  text-align: var(--va-data-table-align);
  vertical-align: var(--va-data-table-vertical-align);
}
.va-data-table .va-data-table__table .va-data-table__table-th.va-data-table__table-cell-select,
.va-data-table .va-data-table__table .va-data-table__table-td.va-data-table__table-cell-select {
  width: var(--va-data-table-selectable-cell-width);
  min-width: var(--va-data-table-selectable-cell-width);
  text-align: var(--va-data-table-selectable-cell-text-align);
  vertical-align: var(--va-data-table-selectable-cell-vertical-align);
  cursor: var(--va-data-table-selectable-tr-cursor);
}
.va-data-table .va-data-table__table .va-data-table__table-th .va-data-table__table-cell-checkbox,
.va-data-table .va-data-table__table .va-data-table__table-td .va-data-table__table-cell-checkbox {
  display: block;
}
.va-data-table .va-data-table__table .va-data-table__table-tr.selected {
  background-color: var(--va-data-table-selected-color);
}
.va-data-table .va-data-table__table.clickable .va-data-table__table-tr {
  cursor: pointer;
}
.va-data-table .va-data-table__table.striped .va-data-table__table-tbody .va-data-table__table-tr:nth-of-type(2n):not(.selected) td {
  position: relative;
  background: var(--va-data-table-striped-tr-background-color);
  opacity: var(--va-data-table-striped-tr-opacity);
}
.va-data-table .va-data-table__table.selectable .va-data-table__table-tbody .va-data-table__table-tr td, .va-data-table .va-data-table__table.hoverable .va-data-table__table-tbody .va-data-table__table-tr td {
  position: relative;
}
.va-data-table .va-data-table__table.selectable .va-data-table__table-tbody .va-data-table__table-tr:hover td, .va-data-table .va-data-table__table.hoverable .va-data-table__table-tbody .va-data-table__table-tr:hover td {
  z-index: 0;
}
.va-data-table .va-data-table__table.selectable .va-data-table__table-tbody .va-data-table__table-tr:hover td::after, .va-data-table .va-data-table__table.hoverable .va-data-table__table-tbody .va-data-table__table-tr:hover td::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--va-data-table-hover-color);
  opacity: 1;
  z-index: -1;
  transition: all 0.3s ease-in-out;
}
.va-data-table .va-data-table__table .table-transition-fade-leave-active {
  transition: opacity var(--va-data-table-transition);
  display: none;
}
.va-data-table .va-data-table__table .table-transition-fade-enter-active {
  transition: opacity var(--va-data-table-transition) 0.2s;
}
.va-data-table .va-data-table__table .table-transition-fade-enter-from,
.va-data-table .va-data-table__table .table-transition-shuffle-enter-from,
.va-data-table .va-data-table__table .table-transition-fade-leave-to,
.va-data-table .va-data-table__table .table-transition-shuffle-leave-to {
  opacity: 0;
}
.va-data-table .va-data-table__table .table-transition-shuffle-move {
  transition: transform var(--va-data-table-transition);
}
.va-data-table .va-data-table__table .table-transition-shuffle-leave-active {
  transition: none;
  display: none;
}
.va-data-table .va-data-table__table .table-transition-shuffle-enter-active {
  transition: opacity var(--va-data-table-transition);
}
.va-data-table__scroll-trigger {
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.va-data-table--grid .va-data-table__table-thead .va-data-table__table-tr {
  display: flex;
  justify-content: space-between;
}
.va-data-table--grid .va-data-table__table-thead .va-data-table__table-tr .va-data-table__table-th {
  box-shadow: none;
}
@media (max-width: 767.98px) {
.va-data-table--grid .va-data-table__table-thead .va-data-table__table-tr {
    flex-direction: column;
}
}
.va-data-table--grid .va-data-table__table-tbody {
  margin-top: var(--va-data-table-grid-tbody-margin-top);
  display: grid;
  grid-template-columns: repeat(var(--va-grid-columns-count), minmax(0, 1fr));
  gap: var(--va-data-table-grid-tbody-gap);
}
.va-data-table--grid .va-data-table__table-tbody .va-data-table__table-tr {
  grid-column: span 1/span 1;
  padding: var(--va-data-table-grid-tr-padding);
  display: flex;
  flex-direction: column;
  border: var(--va-data-table-grid-tr-border);
  border-radius: var(--va-data-table-grid-tr-border-radius);
}
.va-data-table--grid .va-data-table__table-tbody .va-data-table__table-td {
  overflow: hidden;
}
.va-data-table--grid .selectable .va-data-table__table-tr {
  cursor: pointer;
}
.va-data-table--grid .va-data-table__table-td {
  display: flex;
  flex-direction: column;
}
.va-data-table--grid .va-data-table__grid-column-header {
  font-weight: var(--va-data-table-grid-tr-header-font-weight);
  color: var(--va-data-table-grid-tr-header-color);
}