simple-table-core 0.1.5 → 0.1.7

package/src/styles/simple-table.css

@@ -1,242 +0,0 @@
-/* Import Nunito font from Google Fonts */
-@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;700&display=swap");
-
-:root {
-  /* Slate Colors */
-  --slate-50: #f8fafc;
-  --slate-100: #f1f5f9;
-  --slate-200: #e2e8f0;
-  --slate-300: #cbd5e1;
-  --slate-400: #94a3b8;
-  --slate-500: #64748b;
-  --slate-600: #475569;
-  --slate-700: #334155;
-  --slate-800: #1e293b;
-  --slate-900: #0f172a;
-
-  /* Blue Colors */
-  --blue-50: #eff6ff;
-  --blue-100: #dbeafe;
-  --blue-200: #bfdbfe;
-  --blue-300: #93c5fd;
-  --blue-400: #60a5fa;
-  --blue-500: #3b82f6;
-  --blue-600: #2563eb;
-  --blue-700: #1d4ed8;
-  --blue-800: #1e40af;
-  --blue-900: #1e3a8a;
-
-  /* Orange Colors */
-  --orange-50: #fff7ed;
-  --orange-100: #ffedd5;
-  --orange-200: #fed7aa;
-  --orange-300: #fdba74;
-  --orange-400: #fb923c;
-  --orange-500: #f97316;
-  --orange-600: #ea580c;
-  --orange-700: #c2410c;
-  --orange-800: #9a3412;
-  --orange-900: #7c2d12;
-
-  /* Amber Colors */
-  --amber-50: #fffbeb;
-  --amber-100: #fef3c7;
-  --amber-200: #fde68a;
-  --amber-300: #fcd34d;
-  --amber-400: #fbbf24;
-  --amber-500: #f59e0b;
-  --amber-600: #d97706;
-  --amber-700: #b45309;
-  --amber-800: #92400e;
-  --amber-900: #78350f;
-
-  /* Customizable Variables */
-  --st-border-radius: 4px;
-  --st-table-border-color: var(--slate-300);
-  --st-border-width: 1px;
-  --st-resize-handle-color: var(--slate-300);
-  --st-separator-border-color: var(--slate-300);
-  --st-odd-row-background-color: var(--slate-100);
-  --st-dragging-background-color: var(--blue-100);
-  --st-selected-cell-background-color: var(--blue-200);
-  --st-selected-first-cell-background-color: var(--amber-100);
-  --st-border-top-color: var(--blue-500);
-  --st-border-bottom-color: var(--blue-500);
-  --st-border-left-color: var(--blue-500);
-  --st-border-right-color: var(--blue-500);
-  --st-border-top-white-color: white;
-  --st-footer-background-color: white;
-}
-
-/* Global styles */
-* {
-  box-sizing: border-box;
-  margin: 0;
-  padding: 0;
-}
-
-/* Apply Nunito as the default font */
-body {
-  font-family: "Nunito";
-}
-
-/* Wrapper for the table */
-.st-table-wrapper {
-  border: var(--st-border-width) solid var(--st-table-border-color);
-  border-radius: var(--st-border-radius);
-  overflow: auto;
-  max-height: 100dvh;
-  height: auto;
-}
-
-/* Main table styling */
-.st-table {
-  display: grid;
-  border-collapse: collapse;
-  table-layout: auto;
-  white-space: nowrap;
-  width: 100%;
-}
-
-/* Styles for table header cells */
-.st-table-header-cell {
-  position: sticky;
-  top: 0;
-  background-color: white;
-}
-
-/* Common styles for table header and cells */
-.st-table-header-cell,
-.st-table-cell {
-  cursor: pointer;
-  border: var(--st-border-width) solid transparent;
-  color: var(--slate-800);
-  overflow: hidden;
-}
-
-.st-table-header-label,
-.st-table-cell {
-  user-select: none;
-  padding: 8px;
-  text-align: left;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.st-table-cell {
-}
-
-/* Resize handle for table headers */
-.st-table-header-resize-handle {
-  position: absolute;
-  right: 0;
-  top: 0;
-  bottom: 0;
-  width: 5px;
-  cursor: col-resize;
-  background-color: var(--st-resize-handle-color);
-  margin-top: 0.25rem;
-  margin-bottom: 0.25rem;
-  border-radius: 0.25rem;
-}
-
-.st-table-row-separator {
-  height: 1px;
-  background-color: var(--st-separator-border-color);
-  grid-column: 1 / -1;
-}
-
-.st-table-cell-odd-row {
-  background-color: var(--st-odd-row-background-color);
-}
-
-/* Style for a cell when it is being dragged */
-.st-dragging {
-  background-color: var(--st-dragging-background-color);
-}
-
-/* Style for selected table cells */
-.st-table-cell-selected {
-  background-color: var(--st-selected-cell-background-color);
-}
-
-/* Style for the first selected table cell */
-.st-table-cell-selected-first {
-  background-color: var(--st-selected-first-cell-background-color);
-}
-
-/* Blue top border for cells */
-.border-top-blue {
-  border-top: var(--st-border-width) solid var(--st-border-top-color);
-}
-
-/* Blue bottom border for cells */
-.border-bottom-blue {
-  border-bottom: var(--st-border-width) solid var(--st-border-bottom-color);
-}
-
-/* Blue left border for cells */
-.border-left-blue {
-  border-left: var(--st-border-width) solid var(--st-border-left-color);
-}
-
-/* Blue right border for cells */
-.border-right-blue {
-  border-right: var(--st-border-width) solid var(--st-border-right-color);
-}
-
-/* White top border for cells */
-.border-top-white {
-  border-top: var(--st-border-width) solid var(--st-border-top-white-color);
-}
-
-.st-footer {
-  position: sticky;
-  left: 0;
-  bottom: 0;
-  display: flex;
-  align-items: center;
-  background-color: var(--st-footer-background-color);
-
-  padding: 8px;
-
-  border-top: var(--st-border-width) solid var(--st-table-border-color);
-}
-
-.st-next-prev-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 4px;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--slate-600);
-  border: none;
-  border-radius: 4px;
-  transition: background-color 0.3s ease;
-}
-
-.st-next-prev-btn:hover {
-  background-color: var(--slate-100);
-}
-
-.st-page-btn {
-  margin-left: 4px;
-  padding: 4px;
-  cursor: pointer;
-  background-color: transparent;
-  color: var(--slate-600);
-  border: none;
-  border-radius: var(--st-border-radius);
-  transition: background-color 0.3s ease;
-}
-
-.st-page-btn:hover {
-  background-color: var(--slate-100);
-}
-
-.st-page-btn.active {
-  background-color: var(--blue-500);
-  color: white;
-}

package/src/types/HeaderObject.ts

@@ -1,10 +0,0 @@
-import { ReactNode } from "react";
-
-type HeaderObject = {
-  label: string;
-  accessor: string;
-  width: number;
-  cellRenderer?: (row: { [key: string]: any }) => ReactNode;
-};
-
-export default HeaderObject;

package/src/utils/performanceUtils.ts

@@ -1,17 +0,0 @@
-export const throttle = (func: (...args: any[]) => void, limit: number) => {
-  let isFirstCall = true;
-  let inThrottle = true;
-
-  return function (this: any, ...args: any[]) {
-    if (isFirstCall) {
-      isFirstCall = false;
-      setTimeout(() => (inThrottle = false), limit);
-      return;
-    }
-    if (!inThrottle) {
-      func.apply(this, args);
-      inThrottle = true;
-      setTimeout(() => (inThrottle = false), limit);
-    }
-  };
-};

package/src/utils/sortUtils.ts

@@ -1,30 +0,0 @@
-import HeaderObject from "../types/HeaderObject";
-
-export const onSort = (
-  headers: HeaderObject[],
-  rows: { [key: string]: any }[],
-  sortConfig: { key: HeaderObject; direction: string } | null,
-  columnIndex: number
-) => {
-  const key = headers[columnIndex];
-  let direction = "ascending";
-  if (
-    sortConfig &&
-    sortConfig.key.accessor === key.accessor &&
-    sortConfig.direction === "ascending"
-  ) {
-    direction = "descending";
-  }
-
-  const sortedData = [...rows].sort((a, b) => {
-    if (a[key.accessor] < b[key.accessor]) {
-      return direction === "ascending" ? -1 : 1;
-    }
-    if (a[key.accessor] > b[key.accessor]) {
-      return direction === "ascending" ? 1 : -1;
-    }
-    return 0;
-  });
-
-  return { sortedData, newSortConfig: { key, direction } };
-};

package/tsconfig.json

@@ -1,22 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
-    "allowJs": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowSyntheticDefaultImports": true,
-    "strict": true,
-    "forceConsistentCasingInFileNames": true,
-    "noFallthroughCasesInSwitch": true,
-    "module": "esnext",
-    "moduleResolution": "node",
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": false,
-    "declaration": true,
-    "declarationDir": "dist",
-    "jsx": "react-jsx"
-  },
-  "include": ["src"]
-}