pdh-design-system/dist/css/organisms/Tables/Tables.css

PDH Design System React Components

.table-scroll {
  overflow-y: auto;
}

.table-scroll .table-responsive {
  overflow-x: unset;
}

.table-scroll .table-responsive table thead {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  background: white;
  z-index: 1;
}

.tables-item-selected {
  background-color: #caeaff;
  --bs-table-accent-bg: #caeaff;
}

.table-ellipsis {
  width: 100%;
}

.table-ellipsis td {
  max-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

.table-container .center {
  text-align: center;
}

.table-container .table-paginations {
  margin-top: 8px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: center;
}

.table-container .table-paginations .pagination {
  margin: 0;
}

.table-container .table-paginations > span {
  margin-right: 8px;
}

.table-container .data-not-found {
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.th-primary {
  --bs-table-bg: #0d6efd;
  --bs-table-color: #fff;
}

.th-secondary {
  --bs-table-bg: #6c757d;
  --bs-table-color: #fff;
}

.th-success {
  --bs-table-bg: #198754;
  --bs-table-color: #fff;
}

.th-info {
  --bs-table-bg: #0dcaf0;
  --bs-table-color: #000;
}

.th-warning {
  --bs-table-bg: #ffc107;
  --bs-table-color: #000;
}

.th-danger {
  --bs-table-bg: #dc3545;
  --bs-table-color: #fff;
}

.th-light {
  --bs-table-bg: #f8f9fa;
  --bs-table-color: #000;
}

.th-dark {
  --bs-table-bg: #212529;
  --bs-table-color: #fff;
}