updated build

Author: JoshBot-Debug

build/index.d.ts

@@ -2,7 +2,7 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 import styleInject from '/home/josh/Projects/@jjmyers/datatable/node_modules/style-inject/dist/style-inject.es.js';
 import * as react from 'react';
 
-var css_248z = ".myers-datatable .table-container {\n  display: table;\n}\n.myers-datatable .table-row {\n  display: table-row;\n  position: relative;\n}\n.myers-datatable .table-cell {\n  display: table-cell;\n}\n.myers-datatable .table-header-row {\n  z-index: 1;\n}\n.myers-datatable .spinner {\n  border: 4px solid #f3f3f3; /* Light grey */\n  border-top: 4px solid #7e7e7e; /* Blue */\n  border-radius: 50%;\n  width: 15px;\n  height: 15px;\n  animation: spin 1s linear infinite;\n  margin-left: 5px;\n}\n.myers-datatable .spinner-loading-text {\n  margin-left: 10px;\n}\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}\n.myers-datatable .spinner-container {\n  position: absolute;\n  background-color: white;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n  display: flex;\n  align-items: center;\n}";
+var css_248z = ".myers-datatable .table-container {\n  display: flex;\n  flex-direction: column;\n}\n.myers-datatable .table-row {\n  border-collapse: collapse;\n  display: flex;\n}\n.myers-datatable .table-cell {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n.myers-datatable .table-header-row {\n  z-index: 1;\n}\n.myers-datatable .spinner-background {\n  position: absolute;\n  background-color: white;\n  top: 0;\n  left: 0;\n  height: 100%;\n  width: 100%;\n}\n.myers-datatable .spinner-row {\n  display: flex;\n  align-items: center;\n}\n.myers-datatable .spinner {\n  border: 4px solid #f3f3f3; /* Light grey */\n  border-top: 4px solid #7e7e7e; /* Blue */\n  border-radius: 50%;\n  width: 20px;\n  height: 20px;\n  animation: spin 1s linear infinite;\n  margin-left: 5px;\n}\n.myers-datatable .spinner-row {\n  z-index: 1;\n  position: absolute;\n  width: 100%;\n}\n.myers-datatable .spinner-loading-text {\n  margin-left: 10px;\n}\n@keyframes spin {\n  0% {\n    transform: rotate(0deg);\n  }\n  100% {\n    transform: rotate(360deg);\n  }\n}";
 styleInject(css_248z);
 
 declare namespace Datatable {
@@ -11,7 +11,7 @@ declare namespace Datatable {
 
   type Include<T, U> = T extends U ? T : never
 
-  type Datatype = "string" | "boolean" | "date" | "datetime" | "image" | "link" | "email" | "phone" | "name" | "paragraph" | "number";
+  type Datatype = "string" | "boolean" | "date" | "datetime" | "image" | "link" | "email" | "phone" | "name" | "paragraph" | "number" | "time";
 
   type Filters = { [F in Datatype]?: React.ReactNode };
 
@@ -29,7 +29,7 @@ declare namespace Datatable {
     datatype: Include<Datatype, "string" | "link" | "email" | "phone" | "name" | "paragraph" | "image">;
     filterOperations?: UseOperationFilter.TextFilterOperations[];
   } | {
-    datatype: Include<Datatype, "date" | "datetime" | "number">;
+    datatype: Include<Datatype, "date" | "datetime" | "number" | "time">;
     filterOperations?: UseOperationFilter.RangeFilterOperations[];
   } | {
     datatype: Include<Datatype, "boolean">;
@@ -84,8 +84,6 @@ declare namespace Datatable {
     NoData?: React.ReactNode;
     onRowClick?: (row: Data, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     showOptionsOnRowClick?: boolean;
-    autoWidth: Record<keyof Data, { hasAutoSize: boolean, value: boolean }>;
-    toggleAutoWidth: (autoWidth?: boolean, field?: string) => void
   }
 
   interface Filter<Data extends Record<string, any>> {
@@ -100,7 +98,7 @@ declare namespace Datatable {
     column: Column<Data>;
     onClick?: (column: Column<Data>) => void;
     className?: string;
-    autoWidth?: Record<keyof Data, { hasAutoSize: boolean, value: boolean }>;
+    width?: number;
   }
 
   type DatatableFilterProps<Operation> = { multiFilter?: boolean; setOptions?: string[]; datatype: string; field: string; filterOperations?: Operation[] };
@@ -124,8 +122,6 @@ declare namespace Datatable {
     NoData?: React.ReactNode;
     onRowClick?: (row: Data, e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
     showOptionsOnRowClick?: boolean;
-    autoWidth?: Record<keyof Data, { hasAutoSize: boolean, value: boolean }>;
-    toggleAutoWidth: (autoWidth?: boolean, field?: string) => void;
   }
 
 
@@ -295,7 +291,7 @@ declare namespace Datatable {
     type TextFilterOperations = "Equal" | "Not equal" | "Contains" | "Starts with" | "Ends with" | "Is blank";
 
     interface OperationProps<Data extends Record<string, any>, Operation> {
-      inputType?: "text" | "date" | "datetime-local" | "number";
+      inputType?: "text" | "date" | "datetime-local" | "number" | "time";
       field: keyof Data;
       onChange: (result: UseOperationFilter.OperationFilter<Data, Operation>) => void;
       filterOperations?: Operation[];
@@ -316,11 +312,6 @@ declare function useDatatable<Data extends Record<string, any>>(config: Datatabl
     selectable: Datatable.UseSelectable.HookReturn;
     setFilter: Datatable.UseSetFilter.HookReturn<Data>;
     operationFilter: Datatable.UseOperationFilter.HookReturn<Data, string>;
-    autoWidth: Record<keyof Data, {
-        hasAutoSize: boolean;
-        value: boolean;
-    }>;
-    toggleAutoWidth: (autoWidth?: boolean, field?: string) => void;
     updateFilter: react.Dispatch<react.SetStateAction<Datatable.Filter<Data>>>;
     Datatable: typeof RichDatatable;
 };

build/index.esm.js

@@ -13,25 +13,24 @@
   vertical-align: middle;
 }
 .myers-datatable .table-scroll-container {
-  display: flex;
   flex: 1;
   overflow: auto;
-  flex-direction: column;
   position: relative;
 }
-.myers-datatable .table-container {
-  width: 100%;
-  height: -moz-fit-content;
-  height: fit-content;
-  border-collapse: collapse;
-}
 .myers-datatable .table-cell {
   padding-block: 8px;
   padding-inline: 10px;
+  box-sizing: border-box;
   white-space: nowrap;
   vertical-align: middle;
-  text-overflow: ellipsis;
+}
+.myers-datatable .text-wrapper {
   overflow: hidden;
+  text-overflow: ellipsis;
+}
+.myers-datatable .table-header-row {
+  position: sticky;
+  top: 0px;
 }
 .myers-datatable .table-header-cell {
   background-color: rgb(240, 240, 240);
@@ -41,22 +40,10 @@
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none;
-  position: sticky;
-  top: 0;
   padding-inline: 0px;
   padding-block: 0px;
   overflow: visible;
 }
-.myers-datatable .table-header-cell:not(:first-child)::before {
-  content: "";
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 1px;
-  height: 50%;
-  background-color: rgb(190, 190, 190);
-  transform: translateY(-50%);
-}
 .myers-datatable .table-header-children-container {
   display: flex;
   justify-content: space-between;
@@ -106,6 +93,7 @@
   width: 40px;
   min-width: 40px;
   max-width: 40px;
+  align-items: center;
 }
 .myers-datatable .boolean-svg {
   height: 24px;
@@ -121,7 +109,7 @@
   text-transform: capitalize;
 }
 .myers-datatable .cell-datatype-image {
-  max-height: 24px;
+  max-height: 20px;
 }
 .myers-datatable .cell-datatype-paragraph {
   width: 400px;
@@ -181,8 +169,7 @@
   margin: 14px;
 }
 .myers-datatable .apps-button-header-cell {
-  width: 16px;
-  height: 16px;
+  display: block;
 }
 .myers-datatable .header-svg {
   display: flex;
@@ -331,20 +318,4 @@
 }
 .myers-datatable .table-row-clickable {
   cursor: pointer;
-}
-.myers-datatable .email {
-  width: 50px;
-  min-width: 50px;
-  max-width: 50px;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-.myers-datatable .resizer-button {
-  all: unset;
-}
-.myers-datatable .resizer-active-svg {
-  color: rgb(50, 50, 50);
-}
-.myers-datatable .resizer-inactive-svg {
-  color: rgb(100, 100, 100);
 }/*# sourceMappingURL=default.css.map */

build/index.js

@@ -1,13 +1,13 @@
 {
   "files": {
-    "main.css": "/datatable/static/css/main.af5e3844.css",
-    "main.js": "/datatable/static/js/main.2a5319b9.js",
+    "main.css": "/datatable/static/css/main.22ff9a45.css",
+    "main.js": "/datatable/static/js/main.465610a6.js",
     "index.html": "/datatable/index.html",
-    "main.af5e3844.css.map": "/datatable/static/css/main.af5e3844.css.map",
-    "main.2a5319b9.js.map": "/datatable/static/js/main.2a5319b9.js.map"
+    "main.22ff9a45.css.map": "/datatable/static/css/main.22ff9a45.css.map",
+    "main.465610a6.js.map": "/datatable/static/js/main.465610a6.js.map"
   },
   "entrypoints": [
-    "static/css/main.af5e3844.css",
-    "static/js/main.2a5319b9.js"
+    "static/css/main.22ff9a45.css",
+    "static/js/main.465610a6.js"
   ]
 }

build/styles/default.css

@@ -1 +1 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/datatable/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Discover @jjmyers/datatable, a powerful and customizable React library for creating interactive data tables with ease."><link rel="apple-touch-icon" href="/datatable/logo192.png"/><link rel="manifest" href="/datatable/manifest.json"/><title>@jjmyers/datatable - A Powerful React Library for Data Tables</title><script defer="defer" src="/datatable/static/js/main.2a5319b9.js"></script><link href="/datatable/static/css/main.af5e3844.css" rel="stylesheet"></head><body><style>#root,body,html{margin:0;height:100%}</style><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>
+<!doctype html><html lang="en"><head><meta charset="utf-8"/><link rel="icon" href="/datatable/favicon.ico"/><meta name="viewport" content="width=device-width,initial-scale=1"/><meta name="theme-color" content="#000000"/><meta name="description" content="Discover @jjmyers/datatable, a powerful and customizable React library for creating interactive data tables with ease."><link rel="apple-touch-icon" href="/datatable/logo192.png"/><link rel="manifest" href="/datatable/manifest.json"/><title>@jjmyers/datatable - A Powerful React Library for Data Tables</title><script defer="defer" src="/datatable/static/js/main.465610a6.js"></script><link href="/datatable/static/css/main.22ff9a45.css" rel="stylesheet"></head><body><style>#root,body,html{margin:0;height:100%}</style><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div></body></html>