angel-table 0.1.1 → 0.1.3

package/README.md

@@ -1,35 +1,333 @@
-# React + TypeScript + Vite
+# Angel Table
 
-This template provides a minimal setup to get React working in Vite with HMR and some Oxlint rules.
+A flexible and customizable React Table component with built-in sorting, pagination, search, column visibility, row selection, and responsive card layout.
 
-Currently, two official plugins are available:
+## Features
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+- **Responsive Layout** – Automatically adapts between table and card views.
+- **Card View** – Display data as cards on smaller screens.
+- **Sorting** – Sort columns in ascending and descending order.
+- **Pagination** – Built-in pagination controls.
+- **Search** – Search and filter table data.
+- **Row Selection** – Select individual rows or multiple rows.
+- **Column Visibility** – Show or hide columns dynamically.
+- **Custom Rendering** – Customize cell content using render functions.
+- **Remote Data** – Fetch data from an API using a URL.
+- **Custom Styling** – Customize the appearance using CSS.
+- **TypeScript Support** – Built-in TypeScript declarations.
 
-## React Compiler
+## Installation
 
-The React Compiler is enabled on this template. See [this documentation](https://react.dev/learn/react-compiler) for more information.
+Install the package using npm:
 
-Note: This will impact Vite dev & build performances.
-You can also try [the experimental native React Compiler support in plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md#rust-react-compiler) by using `compiler: true` in the plugin options instead of using the Babel plugin.
+```bash
+npm install angel-table
+```
+
+Or using yarn:
+
+```bash
+yarn add angel-table
+```
+
+Or using pnpm:
+
+```bash
+pnpm add angel-table
+```
+
+## Basic Usage
+
+Import the `Table` component:
+
+```tsx
+import { Table } from 'angel-table';
+
+function App() {
+  return (
+    <Table
+      columns={[
+        {
+          title: 'Name',
+          field: 'name',
+        },
+        {
+          title: 'Email',
+          field: 'email',
+        },
+        {
+          title: 'Age',
+          field: 'age',
+        },
+      ]}
+      rows={[
+        {
+          id: 1,
+          name: 'John Doe',
+          email: 'john@example.com',
+          age: 25,
+        },
+        {
+          id: 2,
+          name: 'Jane Smith',
+          email: 'jane@example.com',
+          age: 28,
+        },
+      ]}
+    />
+  );
+}
+
+export default App;
+```
+
+## API Integration
+
+Angel Table supports loading data from an API through `setup.url`.
+
+```tsx
+import { Table } from 'angel-table';
+
+function App() {
+  return (
+    <Table
+      setup={{
+        keyObject: '_id',
+        url: 'https://fakestoreapi.noksha.dev/api/products',
+      }}
+      columns={[
+        {
+          title: 'Product',
+          field: 'title',
+          sort: true,
+        },
+        {
+          title: 'Category',
+          field: 'category',
+          sort: true,
+        },
+        {
+          title: 'Price',
+          field: 'price',
+          sort: true,
+        },
+      ]}
+    />
+  );
+}
+
+export default App;
+```
+
+## Advanced Usage
+
+The following example demonstrates custom columns, responsive card view, column visibility, sorting, and custom cell rendering.
+
+```tsx
+import { Table } from 'angel-table';
+import './App.css';
+
+function App() {
+  return (
+    <Table
+      className='e'
+      setup={{
+        viewDefault: 'card',
+        keyObject: '_id',
+        showColumns: true,
+        url: 'https://fakestoreapi.noksha.dev/api/products',
+      }}
+      columns={[
+        {
+          title: 'No.',
+          field: 'index_field',
+          width: '70px',
+        },
+        {
+          title: 'Image',
+          field: 'image',
+          width: '100px',
+          render: (row) => (
+            <img
+              src={row.image}
+              loading='lazy'
+              alt={row.title}
+              style={{
+                width: '50px',
+                height: '50px',
+                objectFit: 'cover',
+                borderRadius: '6px',
+              }}
+            />
+          ),
+        },
+        {
+          title: 'Product',
+          field: 'title',
+          width: '200px',
+          sort: true,
+        },
+        {
+          title: 'Category',
+          field: 'category',
+          sort: true,
+        },
+        {
+          title: 'Type',
+          field: 'type',
+          sort: true,
+        },
+        {
+          title: 'Brand',
+          field: 'brand',
+          sort: true,
+        },
+        {
+          title: 'Old Price',
+          field: 'oldPrice',
+          sort: true,
+          render: (row) => `$${row.oldPrice}`,
+        },
+        {
+          title: 'Price',
+          field: 'price',
+          sort: true,
+          render: (row) => `$${row.price}`,
+        },
+        {
+          title: 'Discounted Price',
+          field: 'discountedPrice',
+          sort: true,
+          render: (row) => `$${row.discountedPrice}`,
+        },
+        {
+          title: 'Stock',
+          field: 'stock',
+          sort: true,
+        },
+        {
+          title: 'Size',
+          field: 'size',
+          render: (row) => row.size?.join(', '),
+        },
+        {
+          title: 'New',
+          field: 'isNew',
+          render: (row) => (row.isNew ? 'Yes' : 'No'),
+        },
+        {
+          title: 'Description',
+          field: 'description',
+          show: false,
+        },
+        {
+          title: 'Actions',
+          field: 'action_field',
+          width: '120px',
+        },
+      ]}
+    />
+  );
+}
+
+export default App;
+```
 
-## Expanding the Oxlint configuration
+## Column Configuration
 
-If you are developing a production application, we recommend enabling type-aware lint rules by installing `oxlint-tsgolint` and editing `.oxlintrc.json`:
+Each column supports the following properties:
 
-```json
+| Property    | Type       | Description                 |
+| ----------- | ---------- | --------------------------- |
+| `title`     | `string`   | Column heading              |
+| `field`     | `string`   | Data field or special field |
+| `width`     | `string`   | Column width                |
+| `className` | `string`   | Custom CSS class            |
+| `sort`      | `boolean`  | Enable sorting              |
+| `sortLabel` | `object`   | Custom sorting labels       |
+| `show`      | `boolean`  | Control column visibility   |
+| `render`    | `function` | Custom cell rendering       |
+
+### Special Fields
+
+Angel Table provides special fields for common table functionality:
+
+| Field          | Description            |
+| -------------- | ---------------------- |
+| `index_field`  | Display row index      |
+| `check_field`  | Row selection checkbox |
+| `action_field` | Action column          |
+
+### Custom Rendering
+
+Use `render` to customize how cell values are displayed.
+
+```tsx
 {
-  "$schema": "./node_modules/oxlint/configuration_schema.json",
-  "plugins": ["react", "typescript", "oxc"],
-  "options": {
-    "typeAware": true
-  },
-  "rules": {
-    "react/rules-of-hooks": "error",
-    "react/only-export-components": ["warn", { "allowConstantExport": true }]
-  }
+  title: 'Status',
+  field: 'status',
+  render: (row) => (
+    <span className={`status status-${row.status}`}>
+      {row.status}
+    </span>
+  ),
 }
 ```
 
-See the [Oxlint rules documentation](https://oxc.rs/docs/guide/usage/linter/rules) for the full list of rules and categories.
+## Table Configuration
+
+The `setup` property controls the table's behavior.
+
+| Property      | Type      | Description                              |
+| ------------- | --------- | ---------------------------------------- |
+| `keyObject`   | `string`  | Unique identifier for each row           |
+| `url`         | `string`  | API endpoint for remote data             |
+| `viewDefault` | `string`  | Default display mode (`table` or `card`) |
+| `showColumns` | `boolean` | Enable column visibility controls        |
+
+Example:
+
+```tsx
+<Table
+  setup={{
+    keyObject: 'id',
+    viewDefault: 'table',
+    showColumns: true,
+    url: 'https://example.com/api/data',
+  }}
+  columns={columns}
+/>
+```
+
+## Import Styles
+
+Angel Table requires its stylesheet to be imported separately.
+
+```tsx
+import { Table } from 'angel-table';
+import 'angel-table/style.css';
+```
+
+Make sure to import the stylesheet once in your application entry point or main component.
+
+Without importing the stylesheet, the table may not display correctly.
+
+For dark mode, the component supports theme styling through:
+
+```tsx
+<Table columns={columns} setup={{ mode: 'dark' }} />
+```
+
+You can also override the CSS variables to customize colors, borders, backgrounds, and other visual properties.
+
+## TypeScript
+
+Angel Table includes TypeScript type declarations, allowing you to get autocomplete and type checking when configuring columns and table data.
+
+```tsx
+import { Table } from 'angel-table';
+```
+
+## License
+
+Mit

package/package.json

@@ -1,30 +1,39 @@
 {
   "name": "angel-table",
-  "version": "0.1.1",
+  "version": "0.1.3",
+  "description": "A flexible and customizable React Table component",
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "README.md"
   ],
   "main": "./dist/angel-table.umd.cjs",
   "module": "./dist/angel-table.js",
+  "types": "./dist/lib/main.d.ts",
+  "style": "./dist/style.css",
   "exports": {
     ".": {
+      "types": "./dist/lib/main.d.ts",
       "import": "./dist/angel-table.js",
       "require": "./dist/angel-table.umd.cjs"
-    }
+    },
+    "./style.css": "./dist/style.css"
   },
+  "sideEffects": [
+    "**/*.css"
+  ],
   "scripts": {
     "dev": "vite",
     "prebuild": "rm -rf dist",
     "build": "tsc -b && vite build",
     "lint": "oxlint",
     "preview": "vite preview",
-    "publish": "npm run build && npm publish"
+    "prepublishOnly": "npm run build",
+    "publish": "npm publish"
   },
-  "dependencies": {
-    "react": "^19.3.1",
-    "react-dom": "^19.3.1",
-    "vite-plugin-dts": "^5.1.2"
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
   },
   "devDependencies": {
     "@babel/core": "^7.29.7",
@@ -33,11 +42,13 @@
     "@types/node": "^24.19.2",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "@typescript/typescript6": "^6.0.2",
     "@vitejs/plugin-react": "^6.1.2",
     "babel-plugin-react-compiler": "^1.0.0",
     "oxlint": "^1.90.0",
-    "typescript": "~7.0.2",
-    "vite": "^8.3.6"
+    "react": "^19.3.1",
+    "react-dom": "^19.3.1",
+    "typescript": "^6.0.3",
+    "vite": "^8.3.6",
+    "vite-plugin-dts": "^5.1.2"
   }
 }