@blenx-dev/datatable 0.1.1

package/CHANGELOG.md

@@ -0,0 +1,10 @@
+# @blenx-dev/datatable
+
+## 0.1.1
+
+### Patch Changes
+
+- 0439e3e: Use Icon generator and simplify components
+- Updated dependencies [0439e3e]
+  - @blenx-dev/core@0.2.3
+  - @blenx-dev/theme@0.2.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Prashanth Kumar
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@blenx-dev/datatable",
+  "version": "0.1.1",
+  "type": "module",
+  "sideEffects": false,
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@tanstack/react-table": "^8.21.3",
+    "@vanilla-extract/css": "^1.20.1",
+    "@vanilla-extract/recipes": "^0.5.7",
+    "@vanilla-extract/sprinkles": "^1.6.5",
+    "clsx": "^2.1.1",
+    "@blenx-dev/core": "0.2.3",
+    "@blenx-dev/theme": "0.2.3"
+  },
+  "devDependencies": {
+    "@types/react": "^19.2.15",
+    "@types/react-dom": "^19.2.3",
+    "changeset": "^0.2.6"
+  },
+  "peerDependencies": {
+    "react": "^19.2.6",
+    "react-dom": "^19.2.6",
+    "@blenx-dev/core": "0.2.3",
+    "@blenx-dev/theme": "0.2.3"
+  }
+}

package/src/DataTable/data-table-column-toggle.tsx

@@ -0,0 +1,54 @@
+import type { Table } from "@tanstack/react-table";
+import * as styles from "./data-table.css";
+import { Button, Menu, MenuItem, MenuPopup, MenuSeparator, MenuTrigger } from "@blenx-dev/core";
+import { SquareCheckIcon, ListIcon } from "@blenx-dev/core/icons";
+
+interface DataTableColumnToggleProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTableColumnToggle<TData>({ table }: DataTableColumnToggleProps<TData>) {
+  const columns = table.getAllLeafColumns().filter((column) => column.getCanHide());
+
+  if (columns.length === 0) return null;
+
+  const allVisible = columns.every((column) => column.getIsVisible());
+  const someVisible = columns.some((column) => column.getIsVisible());
+
+  return (
+    <Menu>
+      <MenuTrigger render={<Button variant="outline" size="sm" />}>
+        <ListIcon width={16} />
+        <span>Columns</span>
+      </MenuTrigger>
+      <MenuPopup align="end">
+        <MenuItem
+          onClick={() => {
+            for (const column of columns) {
+              column.toggleVisibility(allVisible);
+            }
+          }}
+        >
+          <span className={styles.deselectLabel}>{allVisible ? "Deselect all" : "Select all"}</span>
+          <span className={allVisible ? styles.checkboxChecked : styles.checkboxUnchecked}>
+            {allVisible && <SquareCheckIcon width={16} />}
+            {!allVisible && someVisible && <div className={styles.partial} />}
+          </span>
+        </MenuItem>
+        <MenuSeparator />
+        {columns.map((column) => {
+          const label = column.columnDef.header?.toString() ?? column.id;
+          const isVisible = column.getIsVisible();
+          return (
+            <MenuItem key={column.id} onClick={() => column.toggleVisibility(!isVisible)}>
+              <span className={styles.itemLabel}>{label}</span>
+              <span className={isVisible ? styles.checkboxChecked : styles.checkboxUnchecked}>
+                {isVisible && <SquareCheckIcon width={16} />}
+              </span>
+            </MenuItem>
+          );
+        })}
+      </MenuPopup>
+    </Menu>
+  );
+}

package/src/DataTable/data-table-empty.tsx

@@ -0,0 +1,27 @@
+import { FolderOpenIcon } from "@blenx-dev/core/icons";
+import * as styles from "./data-table.css";
+
+interface DataTableEmptyProps {
+  message?: string;
+  icon?: React.ReactNode;
+  action?: React.ReactNode;
+}
+
+export function DataTableEmpty({
+  message = "No results found",
+  icon,
+  action,
+}: DataTableEmptyProps) {
+  return (
+    <output aria-label={message} className={styles.emptyContainer}>
+      {icon && <div className={styles.iconWrap}>{icon}</div>}
+      {!icon && (
+        <div className={styles.iconWrap}>
+          <FolderOpenIcon width={48} />
+        </div>
+      )}
+      <p className={styles.message}>{message}</p>
+      {action && <div className={styles.actionWrap}>{action}</div>}
+    </output>
+  );
+}

package/src/DataTable/data-table-error.tsx

@@ -0,0 +1,25 @@
+import { CircleAlertIcon } from "@blenx-dev/core/icons";
+import * as styles from "./data-table.css";
+import { Button } from "@blenx-dev/core";
+
+interface DataTableErrorProps {
+  message?: string;
+  onRetry?: () => void;
+}
+
+export function DataTableError({
+  message = "Something went wrong while loading data",
+  onRetry,
+}: DataTableErrorProps) {
+  return (
+    <div role="alert" aria-label={message} className={styles.errorContainer}>
+      <CircleAlertIcon width={48} />
+      <p className={styles.errorMessage}>{message}</p>
+      {onRetry && (
+        <Button variant="outline" size="sm" onClick={onRetry}>
+          Retry
+        </Button>
+      )}
+    </div>
+  );
+}

package/src/DataTable/data-table-infinite-loader.tsx

@@ -0,0 +1,73 @@
+import { Button, Spinner } from "@blenx-dev/core";
+import type { InfiniteScrollConfig } from "./types";
+import { useInfiniteScroll } from "./use-infinite-scroll";
+import * as styles from "./data-table.css";
+
+interface DataTableInfiniteLoaderProps {
+  fetchNextPage: () => void;
+  hasNextPage: boolean;
+  isFetchingNextPage: boolean;
+  isFetching?: boolean;
+  config?: InfiniteScrollConfig;
+}
+
+export function DataTableInfiniteLoader({
+  fetchNextPage,
+  hasNextPage,
+  isFetchingNextPage,
+  isFetching,
+  config,
+}: DataTableInfiniteLoaderProps) {
+  const isAuto = config?.mode === "auto";
+  const loadingText = config?.loadingText ?? "Loading...";
+  const noMoreText = config?.noMoreText ?? "No more results";
+
+  const { sentinelRef } = useInfiniteScroll({
+    hasNextPage,
+    isFetchingNextPage: isFetchingNextPage || Boolean(isFetching),
+    fetchNextPage,
+    rootMargin: config?.rootMargin,
+    threshold: config?.threshold,
+    enabled: isAuto,
+  });
+
+  if (isAuto) {
+    return (
+      <div
+        ref={sentinelRef}
+        aria-label={isFetchingNextPage ? loadingText : noMoreText}
+        className={styles.sentinel}
+      >
+        {isFetchingNextPage && (
+          <div className={styles.loadingInline}>
+            <Spinner />
+            <span className={styles.loaderLoadingText}>{loadingText}</span>
+          </div>
+        )}
+        {!hasNextPage && !isFetchingNextPage && <span className={styles.noMore}>{noMoreText}</span>}
+      </div>
+    );
+  }
+
+  if (!hasNextPage) {
+    return (
+      <div className={styles.center}>
+        <span className={styles.noMore}>{noMoreText}</span>
+      </div>
+    );
+  }
+
+  return (
+    <div className={styles.center}>
+      <Button
+        variant="outline"
+        onClick={fetchNextPage}
+        disabled={isFetchingNextPage}
+        loading={isFetchingNextPage}
+        aria-label={config?.loadMoreText ?? "Load more"}
+      >
+        {config?.loadMoreText ?? "Load more"}
+      </Button>
+    </div>
+  );
+}

package/src/DataTable/data-table-loading.tsx

@@ -0,0 +1,67 @@
+import { Spinner } from "@blenx-dev/core";
+import type { TableSize } from "./types";
+import * as styles from "./data-table.css";
+
+interface DataTableLoadingProps {
+  rowCount?: number;
+  columnCount?: number;
+  size?: TableSize;
+}
+
+const ROW_HEIGHTS: Record<TableSize, number> = {
+  sm: 36,
+  md: 48,
+  lg: 60,
+};
+
+export function DataTableLoading({
+  rowCount = 5,
+  columnCount = 4,
+  size = "md",
+}: DataTableLoadingProps) {
+  const rowHeight = ROW_HEIGHTS[size];
+
+  return (
+    <output className={styles.loadingWrapper} aria-label="Loading table data">
+      <table className={styles.loadingTable}>
+        <thead>
+          <tr>
+            {Array.from({ length: columnCount }).map((_, i) => (
+              <th key={`skeleton-header-${i.toString()}`} className={styles.headerCell}>
+                <div
+                  className={styles.skeletonBar}
+                  style={{ height: 14, width: `${60 + ((i * 10) % 40)}px` }}
+                />
+              </th>
+            ))}
+          </tr>
+        </thead>
+        <tbody>
+          {Array.from({ length: rowCount }).map((_unknown, rowIdx) => (
+            <tr key={`skeleton-row-${rowIdx.toString()}`}>
+              {Array.from({ length: columnCount }).map((_, colIdx) => (
+                <td
+                  key={`skeleton-cell-${rowIdx.toString()}-${colIdx.toString()}`}
+                  className={styles.cell}
+                  style={{ height: rowHeight }}
+                >
+                  <div
+                    className={styles.skeletonBar}
+                    style={{
+                      height: 12,
+                      width: `${80 + ((rowIdx * 7 + colIdx * 13) % 20)}%`,
+                    }}
+                  />
+                </td>
+              ))}
+            </tr>
+          ))}
+        </tbody>
+      </table>
+      <div className={styles.loadingFooter}>
+        <Spinner />
+        <span className={styles.loadingText}>Loading data...</span>
+      </div>
+    </output>
+  );
+}

package/src/DataTable/data-table-pagination.tsx

@@ -0,0 +1,80 @@
+import { Button } from "@blenx-dev/core";
+import type { Table } from "@tanstack/react-table";
+import * as styles from "./data-table.css";
+import { ChevronLeftIcon, ChevronRightIcon } from "@blenx-dev/core/icons";
+
+interface DataTablePaginationProps<TData> {
+  table: Table<TData>;
+}
+
+export function DataTablePagination<TData>({ table }: DataTablePaginationProps<TData>) {
+  const { pageIndex } = table.getState().pagination;
+  const pageCount = table.getPageCount();
+  const totalRows = table.getPrePaginationRowModel().rows.length;
+  const { pageSize } = table.getState().pagination;
+  const startRow = pageIndex * pageSize + 1;
+  const endRow = Math.min((pageIndex + 1) * pageSize, totalRows);
+  const canPreviousPage = table.getCanPreviousPage();
+  const canNextPage = table.getCanNextPage();
+
+  return (
+    <nav aria-label="Pagination" className={styles.nav}>
+      <span className={styles.info}>{totalRows} results</span>
+      <div className={styles.controls}>
+        <span className={styles.range}>
+          {startRow}-{endRow} of {totalRows}
+        </span>
+        <div className={styles.buttonGroup}>
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!canPreviousPage}
+            onClick={() => table.previousPage()}
+            aria-label="Previous page"
+          >
+            <ChevronLeftIcon width={16} />
+          </Button>
+          {Array.from({ length: pageCount }, (_, i) => i + 1)
+            .filter((page) => {
+              const current = pageIndex + 1;
+              if (pageCount <= 7) return true;
+              if (page === 1 || page === pageCount) return true;
+              if (Math.abs(page - current) <= 1) return true;
+              return false;
+            })
+            .map((page, idx, filtered) => {
+              const pageIdx = page - 1;
+              const isActive = pageIdx === pageIndex;
+              const showGap = idx > 0 && page - filtered[idx - 1]! > 1;
+              return (
+                <div key={`page-${page.toString()}`} className={styles.pageWrap}>
+                  {showGap && <span className={styles.ellipsis}>...</span>}
+                  <Button
+                    variant={isActive ? "solid" : "ghost"}
+                    intent={isActive ? "primary" : undefined}
+                    size="sm"
+                    disabled={isActive}
+                    onClick={() => table.setPageIndex(pageIdx)}
+                    aria-label={`Page ${page.toString()}`}
+                    aria-current={isActive ? "page" : undefined}
+                    className={styles.pageButton}
+                  >
+                    {page.toString()}
+                  </Button>
+                </div>
+              );
+            })}
+          <Button
+            variant="outline"
+            size="sm"
+            disabled={!canNextPage}
+            onClick={() => table.nextPage()}
+            aria-label="Next page"
+          >
+            <ChevronRightIcon width={16} />
+          </Button>
+        </div>
+      </div>
+    </nav>
+  );
+}

package/src/DataTable/data-table-toolbar.tsx

@@ -0,0 +1,62 @@
+import { Button, Input } from "@blenx-dev/core";
+import type { Table } from "@tanstack/react-table";
+import { DataTableColumnToggle } from "./data-table-column-toggle";
+import type { BulkAction, TableFeatures } from "./types";
+import * as styles from "./data-table.css";
+
+interface DataTableToolbarProps<TData> {
+  table: Table<TData>;
+  features?: TableFeatures;
+  globalSearch?: string;
+  onGlobalSearchChange?: (value: string) => void;
+  customToolbar?: React.ReactNode;
+  bulkActions?: BulkAction<TData>[];
+  selectedRows: TData[];
+}
+
+export function DataTableToolbar<TData>({
+  table,
+  features,
+  globalSearch,
+  onGlobalSearchChange,
+  customToolbar,
+  bulkActions,
+  selectedRows,
+}: DataTableToolbarProps<TData>) {
+  return (
+    <div className={styles.toolbarContainer}>
+      <div className={styles.leftGroup}>
+        {features?.globalSearch && (
+          <div className={styles.searchWrap}>
+            <Input
+              size="sm"
+              placeholder="Search..."
+              value={globalSearch ?? ""}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
+                onGlobalSearchChange?.(e.target.value);
+              }}
+            />
+          </div>
+        )}
+        {selectedRows.length > 0 &&
+          bulkActions?.map((action, index) => (
+            <Button
+              key={`bulk-action-${index.toString()}`}
+              variant={action.variant === "destructive" ? "solid" : "outline"}
+              intent={action.variant === "destructive" ? "danger" : undefined}
+              size="sm"
+              disabled={action.disabled}
+              onClick={() => action.onClick(selectedRows)}
+            >
+              {action.icon && <span>{action.icon}</span>}
+              {action.label}
+            </Button>
+          ))}
+      </div>
+      <div className={styles.rightGroup}>
+        {customToolbar}
+        {features?.columnVisibility && <DataTableColumnToggle table={table} />}
+      </div>
+    </div>
+  );
+}