flexitablesort 1.0.1 → 1.0.3

package/README.md

@@ -1,13 +1,10 @@
-# FlexiTableSort
+# flexitablesort
 
-![npm](https://img.shields.io/npm/v/flexitablesort?color=blue&label=npm%20version&style=flat-square)
-![downloads](https://img.shields.io/npm/dw/flexitablesort?color=brightgreen&style=flat-square)
-![license](https://img.shields.io/npm/l/flexitablesort?style=flat-square)
-![typescript](https://img.shields.io/badge/types-yes-brightgreen?style=flat-square)
-![stars](https://img.shields.io/github/stars/samiodeh1337/sortable-table?style=social)
-![build](https://github.com/samiodeh1337/sortable-table/actions/workflows/deploy-docs.yml/badge.svg)
+[![npm version](https://img.shields.io/npm/v/flexitablesort)](https://www.npmjs.com/package/flexitablesort)
+[![npm bundle size](https://img.shields.io/bundlephobia/minzip/flexitablesort)](https://bundlephobia.com/package/flexitablesort)
+[![license](https://img.shields.io/npm/l/flexitablesort)](https://github.com/samiodeh1337/sortable-table/blob/main/LICENSE)
+[![npm downloads](https://img.shields.io/npm/dm/flexitablesort)](https://www.npmjs.com/package/flexitablesort)
 
----
 Drag-and-drop row and column reordering for React tables. Smooth animations, auto-scroll, virtual scrolling support, and zero external UI dependencies.
 
 ## Install
@@ -21,21 +18,40 @@ Peer dependencies: `react` and `react-dom` >= 17.0.0
 ## Quick Start
 
 ```jsx
+import { useState } from "react";
 import {
   TableContainer, TableHeader, ColumnCell,
   TableBody, BodyRow, RowCell,
 } from "flexitablesort";
 
+const INIT_COLS = [
+  { id: "name", label: "Name",  width: 150 },
+  { id: "age",  label: "Age",   width: 100 },
+  { id: "email",label: "Email", width: 200 },
+];
+
+const INIT_ROWS = [
+  { id: "1", name: "Alice", age: 28, email: "alice@example.com" },
+  { id: "2", name: "Bob",   age: 34, email: "bob@example.com" },
+  { id: "3", name: "Carol", age: 22, email: "carol@example.com" },
+];
+
+function arrayMove(arr, from, to) {
+  const next = [...arr];
+  const [item] = next.splice(from, 1);
+  next.splice(to, 0, item);
+  return next;
+}
+
 function MyTable() {
-  const [rows, setRows] = useState(data);
-  const [cols, setCols] = useState(columns);
+  const [cols, setCols] = useState(INIT_COLS);
+  const [rows, setRows] = useState(INIT_ROWS);
 
   const handleDragEnd = ({ sourceIndex, targetIndex, dragType }) => {
-    if (dragType === "row") {
-      const next = [...rows];
-      const [moved] = next.splice(sourceIndex, 1);
-      next.splice(targetIndex, 0, moved);
-      setRows(next);
+    if (dragType === "column") {
+      setCols(arrayMove(cols, sourceIndex, targetIndex));
+    } else {
+      setRows(arrayMove(rows, sourceIndex, targetIndex));
     }
   };
 
@@ -43,8 +59,8 @@ function MyTable() {
     <TableContainer onDragEnd={handleDragEnd}>
       <TableHeader>
         {cols.map((col, i) => (
-          <ColumnCell key={col.id} id={col.id} index={i} width={150}>
-            {col.title}
+          <ColumnCell key={col.id} id={col.id} index={i} width={col.width}>
+            {col.label}
           </ColumnCell>
         ))}
       </TableHeader>
@@ -52,7 +68,7 @@ function MyTable() {
         {rows.map((row, ri) => (
           <BodyRow key={row.id} id={row.id} index={ri}>
             {cols.map((col, ci) => (
-              <RowCell key={col.id} index={ci} width={150}>
+              <RowCell key={col.id} index={ci} width={col.width}>
                 {row[col.id]}
               </RowCell>
             ))}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "flexitablesort",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "type": "module",
   "description": "Sortable table with draggable rows and columns",
   "main": "dist/index.cjs.js",