docs: update documentation for latest version of library

Author: geodask

README.md

@@ -17,12 +17,13 @@ Svelte Reactive Table is designed to give you complete control over your data ta
 
   // Your data array
   const data = [
-    { name: 'John Doe', age: 30, city: 'New York' },
-    { name: 'Jane Smith', age: 25, city: 'Los Angeles' },
+    { id: 1, name: 'John Doe', age: 30, city: 'New York' },
+    { id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' },
   ];
 
   // Define your columns
   const columns = [
+    { accessor: 'id', header: 'ID', isIdentifier: true },
     { accessor: 'name', header: 'Name' },
     { accessor: 'age', header: 'Age' },
     { accessor: 'city', header: 'City' }
@@ -63,18 +64,18 @@ Svelte Reactive Table is designed to give you complete control over your data ta
   - ⬜ Custom header rendering
 - ⚡ **Reactive Core**
   - ✅ Reactive data binding
-  - ✅ Column visibility control
+  - ✅ Plugin architecture
   - ⬜ Dynamic column updates
   - ⬜ Computed columns
-- 🔄 **Sorting**
+- 🔄 **Sorting Plugin**
   - ✅ Column-based sorting
   - ✅ Multi-column sort
   - ✅ Custom comparators
 - 🔍 **Filtering**
   - ⬜ Global search
   - ⬜ Column filters
   - ⬜ Custom filter functions
-- 📊 **Pagination**
+- 📊 **Pagination Plugin**
   - ✅ Page size control
   - ✅ Page navigation
   - ✅ First/last page navigation
@@ -86,7 +87,7 @@ Svelte Reactive Table is designed to give you complete control over your data ta
 - 🔗 **Column Management**
   - ⬜ Column resizing
   - ⬜ Column reordering
-  - ✅ Column visibility toggle
+  - ✅ Column visibility plugin
 
 ## Project Structure
 

package.json

@@ -39,16 +39,16 @@
 		]
 	},
 	"devDependencies": {
-		"@changesets/cli": "^2.27.1",
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.18.0",
-		"eslint": "^9.18.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
+		"@changesets/cli": "^2.29.4",
+		"@eslint/compat": "^1.2.9",
+		"@eslint/js": "^9.27.0",
+		"eslint": "^9.27.0",
+		"eslint-config-prettier": "^10.1.5",
+		"eslint-plugin-svelte": "^3.9.0",
+		"globals": "^16.1.0",
 		"prettier": "^3.5.3",
-		"prettier-plugin-svelte": "^3.3.3",
-		"turbo": "^2.5.2",
-		"typescript-eslint": "^8.20.0"
+		"prettier-plugin-svelte": "^3.4.0",
+		"turbo": "^2.5.3",
+		"typescript-eslint": "^8.32.1"
 	}
 }

packages/svelte-reactive-table/README.md

@@ -17,12 +17,13 @@ Svelte Reactive Table is designed to give you complete control over your data ta
 
 	// Your data array
 	const data = [
-		{ name: 'John Doe', age: 30, city: 'New York' },
-		{ name: 'Jane Smith', age: 25, city: 'Los Angeles' }
+		{ id: 1, name: 'John Doe', age: 30, city: 'New York' },
+		{ id: 2, name: 'Jane Smith', age: 25, city: 'Los Angeles' }
 	];
 
 	// Define your columns
 	const columns = [
+		{ accessor: 'id', header: 'ID', isIdentifier: true },
 		{ accessor: 'name', header: 'Name' },
 		{ accessor: 'age', header: 'Age' },
 		{ accessor: 'city', header: 'City' }
@@ -63,18 +64,18 @@ Svelte Reactive Table is designed to give you complete control over your data ta
   - ⬜ Custom header rendering
 - ⚡ **Reactive Core**
   - ✅ Reactive data binding
-  - ✅ Column visibility control
+  - ✅ Plugin architecture
   - ⬜ Dynamic column updates
   - ⬜ Computed columns
-- 🔄 **Sorting**
+- 🔄 **Sorting Plugin**
   - ✅ Column-based sorting
   - ✅ Multi-column sort
   - ✅ Custom comparators
 - 🔍 **Filtering**
   - ⬜ Global search
   - ⬜ Column filters
   - ⬜ Custom filter functions
-- 📊 **Pagination**
+- 📊 **Pagination Plugin**
   - ✅ Page size control
   - ✅ Page navigation
   - ✅ First/last page navigation
@@ -86,7 +87,7 @@ Svelte Reactive Table is designed to give you complete control over your data ta
 - 🔗 **Column Management**
   - ⬜ Column resizing
   - ⬜ Column reordering
-  - ✅ Column visibility toggle
+  - ✅ Column visibility plugin
 
 ## License
 

packages/svelte-reactive-table/src/lib/core/types/plugin.ts

@@ -14,9 +14,10 @@ export interface TablePlugin<T, TPluginState, TPluginId extends string = string>
 	readonly id: TPluginId;
 
 	/**
-	 * Initialize the plugin and attach it to the table
+	 * Initialize the plugin state
 	 *
-	 * @param table - The table instance to attach to
+	 * @param getRows - Function to retrieve the current rows of the table
+	 * @param getColumns - Function to retrieve the current columns of the table
 	 * @returns The plugin state and any enhancements to the table
 	 */
 	init(getRows: () => Row<T>[], getColumns: () => Column<T>[]): PluginOutput<T, TPluginState>;
@@ -33,9 +34,14 @@ export interface PluginOutput<T, TPluginState = unknown> {
 	 * The state of the plugin which will be accessible via table.plugins[id]
 	 */
 	state: TPluginState;
-
+	/**
+	 * The rows transformed by the plugin
+	 */
 	rows: Row<T>[];
 
+	/**
+	 * The columns transformed by the plugin
+	 */
 	columns: Column<T>[];
 }
 

packages/svelte-reactive-table/src/lib/plugins/sorting/sorting.svelte.spec.ts

@@ -148,7 +148,6 @@ describe('reactiveSorting', () => {
 		expect(multiSortOutput.rows[1].original.rating).toBe(4);
 		expect(multiSortOutput.rows[2].original.rating).toBe(5);
 		expect(multiSortOutput.rows[3].original.rating).toBe(null);
-
 	});
 
 	it('should cycle through asc, desc, then remove in multi-sort mode', () => {

packages/svelte-reactive-table/src/routes/components/Sorting.svelte

@@ -28,7 +28,7 @@
 			// Optional: Set initial sorting
 			columnSortings: [{ key: 'age', direction: 'desc' }],
 			// Disable multi-column sorting
-			multiSort: false, 
+			multiSort: false
 		})
 	);