Octane Example: Basic Use Table

GitHub StackBlitz CodeSandbox

html {
  font-family: sans-serif;
  font-size: 14px;
}

table {
  border: 1px solid lightgray;
  border-collapse: collapse;
  border-spacing: 0;
}

tbody {
  border-bottom: 1px solid lightgray;
}

th {
  border-bottom: 1px solid lightgray;
  border-right: 1px solid lightgray;
  padding: 2px 4px;
}

tfoot {
  color: gray;
}

tfoot th {
  font-weight: normal;
}

/* Demo layout utilities for plain example styling. */
.demo-root {
  padding: 0.5rem;
}

.spacer-xs {
  height: 0.25rem;
}

.spacer-sm {
  height: 0.5rem;
}

.spacer-md {
  height: 1rem;
}

.controls,
.button-row,
.inline-controls,
.pin-actions,
.filter-row,
.form-actions {
  display: flex;
  align-items: center;
}

.button-row {
  flex-wrap: wrap;
  gap: 0.5rem;
}

.controls {
  gap: 0.5rem;
}

.inline-controls,
.pin-actions {
  gap: 0.25rem;
}

.pin-actions {
  justify-content: center;
}

.filter-row {
  gap: 0.5rem;
}

.form-actions {
  gap: 1rem;
  margin-bottom: 1rem;
}

.split-tables {
  display: flex;
  gap: 1rem;
}

.table-row-group {
  display: flex;
  border-collapse: collapse;
  border-spacing: 0;
}

.vertical-options {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  align-items: center;
}

.column-toggle-panel {
  display: inline-block;
  border: 1px solid #000;
  border-radius: 0.25rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.column-toggle-panel-header {
  border-bottom: 1px solid #000;
  padding: 0 0.25rem;
}

.column-toggle-row,
.selection-cell {
  padding: 0 0.25rem;
}

.selection-cell {
  display: block;
}

.demo-button,
.pin-button,
.compact-input,
.filter-input,
.filter-select,
.page-size-input,
.text-input,
.number-input,
.wide-action-button,
.primary-action,
.secondary-action,
.success-action {
  border: 1px solid currentColor;
  border-radius: 0.25rem;
}

.demo-button {
  padding: 0.5rem;
}

.demo-button-sm {
  padding: 0.25rem;
}

.demo-button-spaced {
  margin-bottom: 0.5rem;
}

.pin-button {
  padding: 0 0.5rem;
}

.outlined-table {
  border: 2px solid #000;
  border-collapse: collapse;
  border-spacing: 0;
}

.outlined-control {
  border-color: #000;
}

.nowrap {
  white-space: nowrap;
}

.demo-note {
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.section-title {
  font-size: 1.25rem;
}

.scroll-container {
  overflow-x: auto;
}

.page-size-input {
  width: 4rem;
  padding: 0.25rem;
}

.number-input {
  width: 5rem;
  padding: 0 0.25rem;
}

.filter-input,
.filter-select {
  width: 6rem;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
}

.filter-select {
  width: 9rem;
}

.text-input {
  width: 100%;
  padding: 0 0.25rem;
}

.compact-input {
  padding: 0 0.25rem;
}

.wide-action-button {
  width: 16rem;
}

.summary-panel {
  border: 1px solid currentColor;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.2);
  padding: 0.5rem;
}

.sortable-header,
.sortable {
  cursor: pointer;
  user-select: none;
}

.primary-action,
.success-action,
.secondary-action {
  color: #fff;
}

.primary-action {
  background: #3b82f6;
}

.success-action {
  background: #22c55e;
}

.secondary-action {
  background: #6b7280;
}

.submit-button:disabled {
  opacity: 0.5;
}

.error-text {
  color: #ef4444;
  font-size: 0.75rem;
}

.success-text {
  color: #16a34a;
}

.warning-text {
  color: #ca8a04;
}

.muted-text {
  color: #9ca3af;
}

.label-offset {
  margin-left: 0.5rem;
}

.cell-padding {
  padding: 0.25rem;
}

.table-spacer {
  margin-bottom: 0.5rem;
  border-collapse: collapse;
  border-spacing: 0;
}

.warning-panel {
  margin-bottom: 1rem;
  border: 1px solid #facc15;
  border-radius: 0.25rem;
  background: #fef9c3;
  padding: 0.5rem;
}

.code-block {
  overflow: auto;
  border-radius: 0.25rem;
  background: #f3f4f6;
  padding: 0.5rem;
  font-size: 0.75rem;
}

.router-root {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.5rem;
}

.page-title {
  margin-bottom: 0.25rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.disabled-button:disabled {
  color: #6b7280;
  cursor: not-allowed;
}

.pagination-controls {
  margin-block: 0.5rem;
}

.column-size-input {
  width: 6rem;
  margin-left: 0.5rem;
  border: 1px solid currentColor;
  border-radius: 0.25rem;
  padding: 0.25rem;
}

.form-status {
  display: flex;
  gap: 1rem;
  font-size: 0.875rem;
}

.centered-button-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
}

.split-gap {
  gap: 1rem;
}

.demo-link {
  color: #2563eb;
  text-decoration: underline;
}

.capitalized-text {
  text-transform: capitalize;
}

.centered-text {
  text-align: center;
}

.centered-strong-text {
  text-align: center;
  font-weight: 600;
}

.virtualized-title {
  text-align: center;
  font-size: 1.875rem;
  font-weight: 700;
}