@gridcore/react-smart-table 0.1.0

package/README.md

@@ -0,0 +1,139 @@
+# React Smart Table
+
+A customizable, feature-rich table component for React with TypeScript support. Inspired by enterprise-grade table implementations.
+
+## Features
+
+- ✅ **Sorting** - Click column headers to sort
+- ✅ **Row Selection** - Checkbox support with bulk selection
+- ✅ **Custom Rendering** - Full control over cell rendering
+- ✅ **Actions** - Built-in edit/delete actions
+- ✅ **Loading States** - Skeleton loading UI
+- ✅ **TypeScript** - Full type safety with generics
+- ✅ **Responsive** - Mobile-friendly design
+- ✅ **Customizable** - Tailwind CSS styling
+
+## Installation
+
+```bash
+npm install react-smart-table
+```
+
+## Basic Usage
+
+```tsx
+import { SmartTable } from 'react-smart-table';
+
+interface User {
+  id: number;
+  name: string;
+  email: string;
+  status: string;
+}
+
+const users: User[] = [
+  { id: 1, name: 'John Doe', email: 'john@example.com', status: 'Active' },
+  { id: 2, name: 'Jane Smith', email: 'jane@example.com', status: 'Inactive' }
+];
+
+function App() {
+  return (
+    <SmartTable
+      data={users}
+      columns={[
+        { key: 'id', title: 'ID', sortable: true },
+        { key: 'name', title: 'Name', sortable: true },
+        { key: 'email', title: 'Email' },
+        { 
+          key: 'status', 
+          title: 'Status',
+          render: (value) => (
+            <span className={value === 'Active' ? 'text-green-600' : 'text-red-600'}>
+              {value}
+            </span>
+          )
+        }
+      ]}
+    />
+  );
+}
+```
+
+## Advanced Usage
+
+### With Actions and Selection
+
+```tsx
+const [selectedRows, setSelectedRows] = useState<string[]>([]);
+
+<SmartTable
+  data={users}
+  columns={columns}
+  showCheckbox={true}
+  showActions={true}
+  selectedRows={selectedRows}
+  onSelectionChange={setSelectedRows}
+  onEdit={(row) => console.log('Edit:', row)}
+  onDelete={(row) => console.log('Delete:', row)}
+  onRowClick={(row) => console.log('Clicked:', row)}
+  rowKey="id"
+/>
+```
+
+### With Loading State
+
+```tsx
+<SmartTable
+  data={users}
+  columns={columns}
+  loading={isLoading}
+  emptyMessage="No users found"
+/>
+```
+
+## API Reference
+
+### Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `data` | `T[]` | **required** | Array of data objects |
+| `columns` | `Column<T>[]` | **required** | Column definitions |
+| `className` | `string` | `''` | Additional CSS classes |
+| `showCheckbox` | `boolean` | `false` | Show row selection checkboxes |
+| `showActions` | `boolean` | `false` | Show actions column |
+| `onEdit` | `(row: T) => void` | - | Edit button handler |
+| `onDelete` | `(row: T) => void` | - | Delete button handler |
+| `onRowClick` | `(row: T) => void` | - | Row click handler |
+| `loading` | `boolean` | `false` | Show loading skeleton |
+| `emptyMessage` | `string` | `'No data available'` | Empty state message |
+| `selectedRows` | `string[]` | `[]` | Selected row keys |
+| `onSelectionChange` | `(selected: string[]) => void` | - | Selection change handler |
+| `rowKey` | `keyof T` | `'id'` | Unique row identifier |
+
+### Column Definition
+
+```typescript
+interface Column<T> {
+  key: keyof T;              // Data key
+  title: string;             // Column header
+  sortable?: boolean;        // Enable sorting
+  render?: (value: any, row: T) => React.ReactNode;  // Custom cell renderer
+}
+```
+
+## Build
+
+```bash
+npm run build
+```
+
+## Development
+
+```bash
+npm run dev
+```
+
+## License
+
+MIT

package/dist/index.d.mts

@@ -0,0 +1,149 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as LucideIcons from 'lucide-react';
+
+interface Column<T> {
+    key: keyof T;
+    title: string;
+    sortable?: boolean;
+    render?: (value: any, row: T) => React.ReactNode;
+}
+interface BulkAction {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: (selectedRows: string[]) => void;
+    color?: 'red' | 'green' | 'yellow' | 'blue';
+}
+interface SidebarAction {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+}
+type SidebarPosition = 'left' | 'right' | 'top' | 'bottom';
+interface TableStyles {
+    container?: string;
+    table?: string;
+    header?: string;
+    headerRow?: string;
+    headerCell?: string;
+    body?: string;
+    row?: string;
+    rowHover?: string;
+    cell?: string;
+    sidebar?: string;
+    sidebarButton?: string;
+    sidebarButtonHover?: string;
+    checkbox?: string;
+    checkboxChecked?: string;
+}
+interface SmartTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    className?: string;
+    showCheckbox?: boolean;
+    showActions?: boolean;
+    onEdit?: (row: T) => void;
+    onDelete?: (row: T) => void;
+    onRowClick?: (row: T) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+    selectedRows?: string[];
+    onSelectionChange?: (selected: string[]) => void;
+    rowKey?: keyof T;
+    bulkActions?: BulkAction[];
+    onSearch?: (value: string) => void;
+    searchPlaceholder?: string;
+    sidebarActions?: SidebarAction[];
+    sidebarPosition?: SidebarPosition;
+    tableHeight?: string;
+    styles?: TableStyles;
+    primaryColor?: string;
+    pagination?: {
+        currentPage: number;
+        totalPages: number;
+        pageSize: number;
+        totalItems: number;
+        onPageChange: (page: number) => void;
+        onPageSizeChange?: (size: number) => void;
+        pageSizeOptions?: number[];
+    };
+}
+
+interface SmartTablePropsExtended<T> extends Omit<SmartTableProps<T>, 'pagination'> {
+    onAdd?: () => void;
+    onRefresh?: () => void;
+    onExport?: () => void;
+    onPrint?: () => void;
+    onSettings?: () => void;
+    showAdd?: boolean;
+    showRefresh?: boolean;
+    showExport?: boolean;
+    showPrint?: boolean;
+    showSettings?: boolean;
+    showColumnSelector?: boolean;
+    columnSelectorLabel?: string;
+    visibleColumns?: string[];
+    onColumnVisibilityChange?: (columns: string[]) => void;
+    minVisibleColumns?: number;
+    maxVisibleColumns?: number;
+    maxHeight?: string;
+    skeletonRows?: number;
+    pagination?: {
+        currentPage: number;
+        totalPages: number;
+        pageSize: number;
+        totalItems: number;
+        onPageChange: (page: number) => void;
+        onPageSizeChange?: (size: number) => void;
+        pageSizeOptions?: number[];
+    };
+}
+declare function SmartTable<T extends Record<string, any>>({ data, columns, className, showCheckbox, showActions, onEdit, onDelete, onRowClick, loading, emptyMessage, selectedRows, onSelectionChange, rowKey, bulkActions, onSearch, searchPlaceholder, sidebarActions, sidebarPosition, onAdd, onRefresh, onExport, onPrint, onSettings, showAdd, showRefresh, showExport, showPrint, showSettings, tableHeight, styles, primaryColor, pagination, showColumnSelector, columnSelectorLabel, visibleColumns, onColumnVisibilityChange, minVisibleColumns, maxVisibleColumns, maxHeight, skeletonRows }: SmartTablePropsExtended<T>): JSX.Element;
+
+interface TooltipProps {
+    children: React.ReactNode;
+    text: string;
+    position?: 'left' | 'right' | 'top' | 'bottom';
+}
+declare const Tooltip: React.FC<TooltipProps>;
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    pageSize: number;
+    totalItems: number;
+    onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
+    primaryColor?: string;
+}
+declare const Pagination: React.FC<PaginationProps>;
+
+interface ColumnSelectorProps {
+    columns: {
+        key: string;
+        title: string;
+    }[];
+    visibleColumns: string[];
+    onColumnToggle: (columnKey: string) => void;
+    onReset?: () => void;
+    primaryColor?: string;
+    minColumns?: number;
+    maxColumns?: number;
+    label?: string;
+    position?: 'left' | 'right';
+}
+declare const ColumnSelector: React.FC<ColumnSelectorProps>;
+
+type IconName = keyof typeof LucideIcons;
+interface IconProps {
+    name: IconName;
+    className?: string;
+    size?: number;
+    strokeWidth?: number;
+    style?: React.CSSProperties;
+}
+declare const Icon: React.FC<IconProps>;
+declare const getIcon: (name: IconName, props?: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+
+export { type BulkAction, type Column, ColumnSelector, Icon, type IconName, Pagination, type SidebarAction, type SidebarPosition, SmartTable, type SmartTableProps, type TableStyles, Tooltip, getIcon };

package/dist/index.d.ts

@@ -0,0 +1,149 @@
+import React from 'react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as LucideIcons from 'lucide-react';
+
+interface Column<T> {
+    key: keyof T;
+    title: string;
+    sortable?: boolean;
+    render?: (value: any, row: T) => React.ReactNode;
+}
+interface BulkAction {
+    label: string;
+    icon?: React.ReactNode;
+    onClick: (selectedRows: string[]) => void;
+    color?: 'red' | 'green' | 'yellow' | 'blue';
+}
+interface SidebarAction {
+    icon: React.ReactNode;
+    label: string;
+    onClick: () => void;
+}
+type SidebarPosition = 'left' | 'right' | 'top' | 'bottom';
+interface TableStyles {
+    container?: string;
+    table?: string;
+    header?: string;
+    headerRow?: string;
+    headerCell?: string;
+    body?: string;
+    row?: string;
+    rowHover?: string;
+    cell?: string;
+    sidebar?: string;
+    sidebarButton?: string;
+    sidebarButtonHover?: string;
+    checkbox?: string;
+    checkboxChecked?: string;
+}
+interface SmartTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    className?: string;
+    showCheckbox?: boolean;
+    showActions?: boolean;
+    onEdit?: (row: T) => void;
+    onDelete?: (row: T) => void;
+    onRowClick?: (row: T) => void;
+    loading?: boolean;
+    emptyMessage?: string;
+    selectedRows?: string[];
+    onSelectionChange?: (selected: string[]) => void;
+    rowKey?: keyof T;
+    bulkActions?: BulkAction[];
+    onSearch?: (value: string) => void;
+    searchPlaceholder?: string;
+    sidebarActions?: SidebarAction[];
+    sidebarPosition?: SidebarPosition;
+    tableHeight?: string;
+    styles?: TableStyles;
+    primaryColor?: string;
+    pagination?: {
+        currentPage: number;
+        totalPages: number;
+        pageSize: number;
+        totalItems: number;
+        onPageChange: (page: number) => void;
+        onPageSizeChange?: (size: number) => void;
+        pageSizeOptions?: number[];
+    };
+}
+
+interface SmartTablePropsExtended<T> extends Omit<SmartTableProps<T>, 'pagination'> {
+    onAdd?: () => void;
+    onRefresh?: () => void;
+    onExport?: () => void;
+    onPrint?: () => void;
+    onSettings?: () => void;
+    showAdd?: boolean;
+    showRefresh?: boolean;
+    showExport?: boolean;
+    showPrint?: boolean;
+    showSettings?: boolean;
+    showColumnSelector?: boolean;
+    columnSelectorLabel?: string;
+    visibleColumns?: string[];
+    onColumnVisibilityChange?: (columns: string[]) => void;
+    minVisibleColumns?: number;
+    maxVisibleColumns?: number;
+    maxHeight?: string;
+    skeletonRows?: number;
+    pagination?: {
+        currentPage: number;
+        totalPages: number;
+        pageSize: number;
+        totalItems: number;
+        onPageChange: (page: number) => void;
+        onPageSizeChange?: (size: number) => void;
+        pageSizeOptions?: number[];
+    };
+}
+declare function SmartTable<T extends Record<string, any>>({ data, columns, className, showCheckbox, showActions, onEdit, onDelete, onRowClick, loading, emptyMessage, selectedRows, onSelectionChange, rowKey, bulkActions, onSearch, searchPlaceholder, sidebarActions, sidebarPosition, onAdd, onRefresh, onExport, onPrint, onSettings, showAdd, showRefresh, showExport, showPrint, showSettings, tableHeight, styles, primaryColor, pagination, showColumnSelector, columnSelectorLabel, visibleColumns, onColumnVisibilityChange, minVisibleColumns, maxVisibleColumns, maxHeight, skeletonRows }: SmartTablePropsExtended<T>): JSX.Element;
+
+interface TooltipProps {
+    children: React.ReactNode;
+    text: string;
+    position?: 'left' | 'right' | 'top' | 'bottom';
+}
+declare const Tooltip: React.FC<TooltipProps>;
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    pageSize: number;
+    totalItems: number;
+    onPageSizeChange?: (size: number) => void;
+    pageSizeOptions?: number[];
+    primaryColor?: string;
+}
+declare const Pagination: React.FC<PaginationProps>;
+
+interface ColumnSelectorProps {
+    columns: {
+        key: string;
+        title: string;
+    }[];
+    visibleColumns: string[];
+    onColumnToggle: (columnKey: string) => void;
+    onReset?: () => void;
+    primaryColor?: string;
+    minColumns?: number;
+    maxColumns?: number;
+    label?: string;
+    position?: 'left' | 'right';
+}
+declare const ColumnSelector: React.FC<ColumnSelectorProps>;
+
+type IconName = keyof typeof LucideIcons;
+interface IconProps {
+    name: IconName;
+    className?: string;
+    size?: number;
+    strokeWidth?: number;
+    style?: React.CSSProperties;
+}
+declare const Icon: React.FC<IconProps>;
+declare const getIcon: (name: IconName, props?: Omit<IconProps, "name">) => react_jsx_runtime.JSX.Element;
+
+export { type BulkAction, type Column, ColumnSelector, Icon, type IconName, Pagination, type SidebarAction, type SidebarPosition, SmartTable, type SmartTableProps, type TableStyles, Tooltip, getIcon };