react-datagrid-component/dist/style.css

A powerful, customizable data grid component built with React, TypeScript, and TanStack Table v8

/* FluentGrid Component Styles */

/* Base styles - using standard CSS instead of @apply */
.fluent-grid {
  width: 100%;
}

.fluent-grid-table {
  width: 100%;
  border-collapse: collapse;
}

.fluent-grid-header {
  background-color: hsl(var(--muted) / 0.5);
  border-bottom: 1px solid hsl(var(--border));
}

.fluent-grid-header-cell {
  padding: 0.5rem 0.75rem;
  text-align: left;
  font-size: 0.875rem;
  font-weight: 500;
  color: hsl(var(--muted-foreground));
}

.fluent-grid-row {
  border-bottom: 1px solid hsl(var(--border));
  transition: background-color 0.2s ease;
}

.fluent-grid-row:hover {
  background-color: hsl(var(--muted) / 0.5);
}

.fluent-grid-row.selected {
  background-color: hsl(var(--muted));
}

.fluent-grid-cell {
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
}

.fluent-grid-cell.editing {
  padding: 0;
}

.fluent-grid-input {
  width: 100%;
  height: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border: none;
  background: transparent;
  outline: none;
}

.fluent-grid-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}

.fluent-grid-select {
  width: 100%;
  height: 100%;
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
  border: none;
  background: transparent;
  outline: none;
}

.fluent-grid-select:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring));
}

/* Badge styles */
.fluent-grid-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 9999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 500;
}

.fluent-grid-badge.active {
  background-color: hsl(142 76% 36%);
  color: hsl(138 76% 97%);
}

.fluent-grid-badge.inactive {
  background-color: hsl(0 84% 60%);
  color: hsl(0 0% 98%);
}

.fluent-grid-badge.pending {
  background-color: hsl(48 96% 53%);
  color: hsl(20 14% 4%);
}

/* Avatar styles */
.fluent-grid-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background-color: hsl(var(--muted));
}

.fluent-grid-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  object-fit: cover;
}

/* Progress bar styles */
.fluent-grid-progress {
  width: 100%;
  background-color: hsl(var(--muted));
  border-radius: 9999px;
  height: 0.5rem;
}

.fluent-grid-progress-bar {
  height: 0.5rem;
  border-radius: 9999px;
  transition: all 0.3s ease;
}

/* Search and filter styles */
.fluent-grid-search {
  width: 100%;
  max-width: 24rem;
}

.fluent-grid-filter {
  width: 100%;
  max-width: 20rem;
}

/* Pagination styles */
.fluent-grid-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}

.fluent-grid-pagination-info {
  font-size: 0.875rem;
  color: hsl(var(--muted-foreground));
}

.fluent-grid-pagination-controls {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Theme-aware styles */
.fluent-grid[data-theme="dark"] {
  color-scheme: dark;
}

.fluent-grid[data-theme="light"] {
  color-scheme: light;
}

/* Responsive styles */
@media (max-width: 768px) {
  .fluent-grid-table {
    font-size: 0.75rem;
  }
  
  .fluent-grid-cell {
    padding: 0.25rem 0.5rem;
  }
  
  .fluent-grid-header-cell {
    padding: 0.25rem 0.5rem;
  }
}

/* Animation styles */
.fluent-grid-fade-in {
  animation: fadeIn 0.2s ease-in-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.fluent-grid-slide-in {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: translateX(0);
  }
}

/* Focus and accessibility styles */
.fluent-grid:focus-within {
  box-shadow: 0 0 0 2px hsl(var(--ring));
  outline-offset: 2px;
}

.fluent-grid-cell:focus {
  outline: none;
  box-shadow: 0 0 0 2px hsl(var(--ring));
  outline-offset: 1px;
}

/* Loading states */
.fluent-grid-loading {
  opacity: 0.5;
  pointer-events: none;
}

.fluent-grid-loading-overlay {
  position: absolute;
  inset: 0;
  background-color: hsl(var(--background) / 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom scrollbar for better UX */
.fluent-grid-scroll-area {
  scrollbar-width: thin;
  scrollbar-color: hsl(var(--muted)) transparent;
}

.fluent-grid-scroll-area::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.fluent-grid-scroll-area::-webkit-scrollbar-track {
  background: transparent;
}

.fluent-grid-scroll-area::-webkit-scrollbar-thumb {
  background-color: hsl(var(--muted));
  border-radius: 3px;
}

.fluent-grid-scroll-area::-webkit-scrollbar-thumb:hover {
  background-color: hsl(var(--muted-foreground));
}