@gridcore/react-smart-table 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +4 -17
  2. package/dist/index.mjs +4 -17
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -212,19 +212,13 @@ function TableHeader({
212
212
  styles = {},
213
213
  primaryColor = "purple"
214
214
  }) {
215
- const checkboxBg = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
216
- const checkboxBorder = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
217
215
  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("tr", { className: styles.headerRow || "border-b border-gray-200", children: [
218
216
  showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("th", { className: styles.headerCell || "w-15 pl-4 py-3 text-left", children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "relative group", children: [
219
217
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("input", { type: "checkbox", checked: selectAll, onChange: onSelectAll, className: "sr-only" }),
220
218
  /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
221
219
  "div",
222
220
  {
223
- className: styles.checkbox || `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95`,
224
- style: {
225
- borderColor: selectAll ? checkboxBorder : "rgb(209 213 219)",
226
- backgroundColor: selectAll ? checkboxBg : "white"
227
- },
221
+ className: `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95 ${selectAll ? `bg-${primaryColor}-600 border-${primaryColor}-600` : "bg-white border-gray-300"}`,
228
222
  onClick: onSelectAll,
229
223
  children: selectAll && /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { name: "Check", className: "w-3 h-3 text-white", strokeWidth: 2.5 })
230
224
  }
@@ -261,20 +255,13 @@ function TableRow({
261
255
  styles = {},
262
256
  primaryColor = "purple"
263
257
  }) {
264
- const checkboxBg = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
265
- const checkboxBorder = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
266
- const actionColor = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
267
258
  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("tr", { className: styles.row || "hover:bg-gray-50 cursor-pointer border-b border-gray-100", onClick: onRowClick, children: [
268
259
  showCheckbox && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: "pl-4 py-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "relative group", children: [
269
260
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("input", { type: "checkbox", checked: isSelected, onChange: onSelect, className: "sr-only" }),
270
261
  /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
271
262
  "div",
272
263
  {
273
- className: styles.checkbox || `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95`,
274
- style: {
275
- borderColor: isSelected ? checkboxBorder : "rgb(209 213 219)",
276
- backgroundColor: isSelected ? checkboxBg : "white"
277
- },
264
+ className: `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95 ${isSelected ? `bg-${primaryColor}-600 border-${primaryColor}-600` : "bg-white border-gray-300"}`,
278
265
  onClick: onSelect,
279
266
  children: isSelected && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Check", className: "w-3 h-3 text-white", strokeWidth: 2.5 })
280
267
  }
@@ -282,8 +269,8 @@ function TableRow({
282
269
  ] }) }),
283
270
  columns.map((col) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: styles.cell || "px-4 py-4 text-sm text-gray-900", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Tooltip, { text: String(col.render ? col.render(row[col.key], row) : row[col.key] || "-"), position: "top", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("span", { className: "block truncate", "data-truncate": true, children: col.render ? col.render(row[col.key], row) : row[col.key] || "-" }) }) }, String(col.key))),
284
271
  showActions && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("td", { className: styles.cell || "px-2 py-4 text-sm", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { className: "flex space-x-2", children: [
285
- onEdit && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: onEdit, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Edit2", className: "w-4 h-4", style: { color: actionColor } }) }),
286
- onDelete && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: onDelete, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Trash2", className: "w-4 h-4", style: { color: actionColor } }) })
272
+ onEdit && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: onEdit, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Edit2", className: `w-4 h-4 text-${primaryColor}-600` }) }),
273
+ onDelete && /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("button", { onClick: onDelete, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Icon, { name: "Trash2", className: `w-4 h-4 text-${primaryColor}-600` }) })
287
274
  ] }) })
288
275
  ] });
289
276
  }
package/dist/index.mjs CHANGED
@@ -171,19 +171,13 @@ function TableHeader({
171
171
  styles = {},
172
172
  primaryColor = "purple"
173
173
  }) {
174
- const checkboxBg = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
175
- const checkboxBorder = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
176
174
  return /* @__PURE__ */ jsxs4("tr", { className: styles.headerRow || "border-b border-gray-200", children: [
177
175
  showCheckbox && /* @__PURE__ */ jsx5("th", { className: styles.headerCell || "w-15 pl-4 py-3 text-left", children: /* @__PURE__ */ jsxs4("div", { className: "relative group", children: [
178
176
  /* @__PURE__ */ jsx5("input", { type: "checkbox", checked: selectAll, onChange: onSelectAll, className: "sr-only" }),
179
177
  /* @__PURE__ */ jsx5(
180
178
  "div",
181
179
  {
182
- className: styles.checkbox || `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95`,
183
- style: {
184
- borderColor: selectAll ? checkboxBorder : "rgb(209 213 219)",
185
- backgroundColor: selectAll ? checkboxBg : "white"
186
- },
180
+ className: `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95 ${selectAll ? `bg-${primaryColor}-600 border-${primaryColor}-600` : "bg-white border-gray-300"}`,
187
181
  onClick: onSelectAll,
188
182
  children: selectAll && /* @__PURE__ */ jsx5(Icon, { name: "Check", className: "w-3 h-3 text-white", strokeWidth: 2.5 })
189
183
  }
@@ -220,20 +214,13 @@ function TableRow({
220
214
  styles = {},
221
215
  primaryColor = "purple"
222
216
  }) {
223
- const checkboxBg = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
224
- const checkboxBorder = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
225
- const actionColor = primaryColor === "purple" ? "rgb(147 51 234)" : `var(--${primaryColor}-600)`;
226
217
  return /* @__PURE__ */ jsxs5("tr", { className: styles.row || "hover:bg-gray-50 cursor-pointer border-b border-gray-100", onClick: onRowClick, children: [
227
218
  showCheckbox && /* @__PURE__ */ jsx6("td", { className: "pl-4 py-4", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs5("div", { className: "relative group", children: [
228
219
  /* @__PURE__ */ jsx6("input", { type: "checkbox", checked: isSelected, onChange: onSelect, className: "sr-only" }),
229
220
  /* @__PURE__ */ jsx6(
230
221
  "div",
231
222
  {
232
- className: styles.checkbox || `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95`,
233
- style: {
234
- borderColor: isSelected ? checkboxBorder : "rgb(209 213 219)",
235
- backgroundColor: isSelected ? checkboxBg : "white"
236
- },
223
+ className: `w-5 h-5 border-2 rounded-lg cursor-pointer transition-all duration-300 flex items-center justify-center transform hover:scale-105 active:scale-95 ${isSelected ? `bg-${primaryColor}-600 border-${primaryColor}-600` : "bg-white border-gray-300"}`,
237
224
  onClick: onSelect,
238
225
  children: isSelected && /* @__PURE__ */ jsx6(Icon, { name: "Check", className: "w-3 h-3 text-white", strokeWidth: 2.5 })
239
226
  }
@@ -241,8 +228,8 @@ function TableRow({
241
228
  ] }) }),
242
229
  columns.map((col) => /* @__PURE__ */ jsx6("td", { className: styles.cell || "px-4 py-4 text-sm text-gray-900", children: /* @__PURE__ */ jsx6(Tooltip, { text: String(col.render ? col.render(row[col.key], row) : row[col.key] || "-"), position: "top", children: /* @__PURE__ */ jsx6("span", { className: "block truncate", "data-truncate": true, children: col.render ? col.render(row[col.key], row) : row[col.key] || "-" }) }) }, String(col.key))),
243
230
  showActions && /* @__PURE__ */ jsx6("td", { className: styles.cell || "px-2 py-4 text-sm", onClick: (e) => e.stopPropagation(), children: /* @__PURE__ */ jsxs5("div", { className: "flex space-x-2", children: [
244
- onEdit && /* @__PURE__ */ jsx6("button", { onClick: onEdit, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ jsx6(Icon, { name: "Edit2", className: "w-4 h-4", style: { color: actionColor } }) }),
245
- onDelete && /* @__PURE__ */ jsx6("button", { onClick: onDelete, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ jsx6(Icon, { name: "Trash2", className: "w-4 h-4", style: { color: actionColor } }) })
231
+ onEdit && /* @__PURE__ */ jsx6("button", { onClick: onEdit, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ jsx6(Icon, { name: "Edit2", className: `w-4 h-4 text-${primaryColor}-600` }) }),
232
+ onDelete && /* @__PURE__ */ jsx6("button", { onClick: onDelete, className: "p-1 rounded hover:bg-gray-100", children: /* @__PURE__ */ jsx6(Icon, { name: "Trash2", className: `w-4 h-4 text-${primaryColor}-600` }) })
246
233
  ] }) })
247
234
  ] });
248
235
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@gridcore/react-smart-table",
3
- "version": "0.1.1",
3
+ "version": "0.1.2",
4
4
  "description": "A smart table component for React",
5
5
  "main": "./dist/index.js",
6
6
  "module": "./dist/index.mjs",