nillys-react-table-library/nrtl/index.css

Responsive table library for React.js

/* nrtl/nrtl.css */
#NRTL {
  display: flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  margin-top: 2em;
  --header-bg-color:
    linear-gradient(
      to left,
      rgb(204.4364640884, 218.0497237569, 115.9502762431),
      rgb(169.3251533742, 190.3680981595, 74.6319018405));
  --header-hover-bg-color: rgb(165.3480662983, 183.2928176796, 48.7071823204);
  --row-color: #ffffff;
  --hover-row-color: #36395a;
  --text-color: #36395a;
  --hover-text-color: #ffffff;
  --disable-button-color: #dcdcdc;
  --column-sorting-color: #dcdcdc;
  --column-sorting-full-filled-color: #36395a;
}
@media (max-width: 768px) {
  #NRTL {
    width: 100%;
  }
}
#NRTL .tableHeader {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .5em;
}
@media (max-width: 768px) {
  #NRTL .tableHeader {
    padding: 1em;
  }
}
#NRTL .tableHeader .selectContainer {
  display: flex;
  align-items: center;
  gap: .5em;
}
#NRTL .tableHeader .searchContainer {
  display: flex;
  align-items: center;
  gap: .5em;
}
@media (max-width: 768px) {
  #NRTL .tableHeader .searchContainer {
    justify-content: flex-end;
  }
}
#NRTL .tableHeader .searchContainer input {
  border: 1px solid #36395a;
  padding: .5em;
  height: 1.7em;
}
@media (max-width: 768px) {
  #NRTL .tableHeader .searchContainer input {
    width: 50%;
  }
}
#NRTL .tableHeader .searchContainer input:focus {
  outline: 3px solid #36395a;
}
@media (max-width: 768px) {
  #NRTL .tableWrapper {
    width: 100%;
    overflow-x: auto;
  }
}
#NRTL table {
  width: 85dvw;
  border-collapse: collapse;
  border-spacing: 0;
  background: var(--header-bg-color, linear-gradient(to left, rgb(204.4364640884, 218.0497237569, 115.9502762431), rgb(169.3251533742, 190.3680981595, 74.6319018405)));
  border-radius: 10px;
  table-layout: fixed;
}
@media (max-width: 768px) {
  #NRTL table {
    width: 100%;
    table-layout: auto;
    border-radius: unset;
  }
}
#NRTL thead th {
  padding: 10px;
  text-align: center;
  position: relative;
  font-weight: 700;
}
@media (max-width: 1024px) {
  #NRTL thead th {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
@media (max-width: 1024px) {
  #NRTL thead th:hover {
    white-space: normal;
    overflow: visible;
  }
  #NRTL thead th:hover .chevron svg {
    opacity: 0;
  }
}
#NRTL thead th:hover {
  background: var(--header-hover-bg-color, rgb(165.3480662983, 183.2928176796, 48.7071823204));
  cursor: pointer;
  transition: background 150ms ease-in-out;
}
#NRTL thead th:hover:first-child {
  border-radius: 10px 0 0 0;
}
@media (max-width: 768px) {
  #NRTL thead th:hover:first-child {
    border-radius: unset;
  }
}
#NRTL thead th:hover:last-child {
  border-radius: 0 10px 0 0;
}
@media (max-width: 768px) {
  #NRTL thead th:hover:last-child {
    border-radius: unset;
  }
}
#NRTL thead th div {
  display: flex;
  flex-flow: column;
  position: absolute;
  right: 1.3dvw;
  top: 0;
}
@media (max-width: 768px) {
  #NRTL thead th div {
    top: -4px;
    right: 2dvw;
  }
}
#NRTL thead th .chevron {
  stroke: var(--column-sorting-color, #dcdcdc);
  fill: var(--column-sorting-color, #dcdcdc);
}
@media (max-width: 1024px) {
  #NRTL thead th .chevron svg {
    width: 10px !important;
    height: 10px !important;
  }
}
@media (max-width: 768px) {
  #NRTL thead th .chevron svg {
    width: 6px !important;
    height: 6px !important;
  }
}
#NRTL thead th .chevron-active {
  stroke: var(--column-sorting-full-filled-color, #36395a);
  fill: var(--column-sorting-full-filled-color, #36395a);
}
#NRTL thead th div > span:first-child {
  position: absolute;
  bottom: -25.2px;
}
#NRTL thead th div > span:last-child {
  position: absolute;
  top: 17px;
}
#NRTL thead th div span svg {
  width: 1.2dvw;
  height: 1.2dvh;
}
#NRTL tbody tr {
  background: var(--row-color, #ffffff);
}
#NRTL td {
  padding: 10px;
  text-align: center;
}
#NRTL table tbody tr:hover {
  background: var(--row-hover-color, #36395a) !important;
  cursor: default;
}
#NRTL table tbody tr:hover td {
  color: var(--row-color, #ffffff);
}
#NRTL table tbody td {
  max-width: 200px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
#NRTL table tbody td:hover {
  white-space: normal;
  overflow: visible;
}
#NRTL tbody tr:last-child td:first-child {
  border-radius: 0 0 0 10px;
}
@media (max-width: 768px) {
  #NRTL tbody tr:last-child td:first-child {
    border-radius: unset;
  }
}
#NRTL tbody tr:last-child td:last-child {
  border-radius: 0 0 10px 0;
}
@media (max-width: 768px) {
  #NRTL tbody tr:last-child td:last-child {
    border-radius: unset;
  }
}
#NRTL .tableFooter {
  margin: 1em 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
@media (max-width: 768px) {
  #NRTL .tableFooter {
    padding: 0 1.5em;
  }
}
#NRTL .tableFooter .buttonContainer {
  display: flex;
  gap: 1em;
  justify-content: center;
}
#NRTL .tableFooter .buttonContainer button {
  width: 150px;
  text-align: center;
  background: #f6f6f6;
  color: var(--text-color, #36395a);
  border: 1px solid var(--text-color, #36395a);
  cursor: pointer;
  padding: .3em .5em;
}
#NRTL .tableFooter .buttonContainer button:disabled {
  background: var(--default-disabled-button-color, #dcdcdc) !important;
  cursor: not-allowed !important;
}
#NRTL .tableFooter .buttonContainer .paginationIcn {
  font-size: 1.4em;
  cursor: pointer;
}
#NRTL .tableFooter .buttonContainer .disabled {
  opacity: 0;
}