Implementing export file to csv action

.github/workflows/pages-deploy.yml

@@ -0,0 +1,60 @@
+name: Deploy Package Docs
+
+on:
+  workflow_dispatch:
+
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20.19.0
+          cache: npm
+          cache-dependency-path: |
+            package-lock.json
+            page/package-lock.json
+
+      - name: Install root dependencies
+        run: npm ci
+
+      - name: Build package distribution
+        run: npm run rollup
+
+      - name: Install page dependencies
+        run: npm ci --prefix page
+
+      - name: Build page
+        run: npm run build --prefix page
+
+      - name: Setup Pages
+        uses: actions/configure-pages@v5
+
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: page/dist
+
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

.gitignore

@@ -1,4 +1,5 @@
 node_modules
 dist
+coverage
 # Local Cursor settings/rules are intentionally not versioned.
 .cursor/

CHANGELOG.md

@@ -7,6 +7,13 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 ## [Unreleased] - yyyy-mm-dd
 
+## [1.1.0] - 2026-April-03
+
+### Added
+
+- CSV export support in `TableComponent` through a new `export` config (`show`, `exportLabel`, and `onExport`); default behavior downloads the currently processed table data while allowing custom export handlers.
+- New `test:coverage` npm command to run Jest coverage with both detailed per-file output and total coverage summary percentages.
+
 ## [1.0.0] - 2026-Mar-23
 
 ### Added

README.md

@@ -1,6 +1,6 @@
 # react-agnostic-table
 
-React Agnostic Table is an agnostic table component that can be used in a lot of different scenarios. The component allows the user to send all data and will deal with pagination, filtering and search. The component can also trigger pagination, filtering and search callbacks in case a server side data search is necessary. Every part of the table receives custom classes so the table is 100% customizable.
+React Agnostic Table is an agnostic table component that can be used in a lot of different scenarios. The component allows the user to send all data and will deal with pagination, filtering, search, and CSV export. The component can also trigger pagination, filtering, search, and export callbacks in case server side behavior is necessary. Every part of the table receives custom classes so the table is 100% customizable.
 
 **Npm Package:** [react-agnostic-table - npm](https://www.npmjs.com/package/react-agnostic-table)
 
@@ -12,6 +12,42 @@ Install the package from npm:
 npm i react-agnostic-table
 ```
 
+## Testing
+
+Run all tests:
+
+```bash
+npm test
+```
+
+Run tests with coverage:
+
+```bash
+npm run test:coverage
+```
+
+The coverage command prints percentage metrics in the terminal (Statements, Branches, Functions, and Lines) and also writes HTML and LCOV reports into the `coverage/` folder.
+
+## Documentation Website
+
+This repository includes a documentation site in `page/` (Vite + React).
+
+Run it locally:
+
+```bash
+npm run rollup
+npm install --prefix page
+npm run dev --prefix page
+```
+
+Build it locally:
+
+```bash
+npm run build --prefix page
+```
+
+Deploy is automated by `.github/workflows/pages-deploy.yml` and publishes from `page/dist`.
+
 ## Examples
 
 Import the default `TableComponent` and pass `headers`, `data`, and any optional configs:
@@ -59,6 +95,11 @@ export function ExampleTable() {
         applyFilterLabel: "Apply",
         cancelFilterLabel: "Cancel",
       }}
+      export={{
+        show: true,
+        exportLabel: "Export CSV",
+        fileName: "users-report",
+      }}
     />
   );
 }
@@ -79,6 +120,7 @@ export function ExampleTable() {
 | sorting    | `TableSortingConfig`                                    | false        | `{}`          | Sorting behavior and callbacks.               |
 | search     | `TableSearchConfig`                                     | false        | `{}`          | Search behavior and callbacks.                |
 | filter     | `TableFilterConfig`                                     | false        | `{}`          | Filter behavior and callbacks.                |
+| export     | `TableExportConfig`                                     | false        | `{}`          | CSV export behavior and callback override.    |
 | styling    | `TableStylingConfig`                                    | false        | `{}`          | Style and theme options.                      |
 
 ### `pagination` config (`TablePaginationConfig`)
@@ -138,6 +180,17 @@ export function ExampleTable() {
 | titleClassNames     | `string`                                   |             | Custom class names for table title.   |
 | colorPalette        | `"classic" \| "modernDark" \| "softEarth"` | `"classic"` | Built-in table color palette.         |
 
+### `export` config (`TableExportConfig`)
+
+| Field       | Type                             | Default          | Description                                                                                         |
+| ----------- | -------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------- |
+| show        | `boolean`                        | `false`          | Shows/hides the export button in the top controls area, opposite to search/filter controls.         |
+| onExport    | `(data: TableRowData[]) => void` |                  | Optional override callback. When provided, it receives the processed table data and handles export. |
+| exportLabel | `string`                         | `"download"`     | Custom export button text. If omitted or blank, the button label falls back to `"download"`.        |
+| fileName    | `string`                         | `"table-export"` | File name used for automatic CSV downloads. `.csv` is appended if it is not provided.               |
+
+When `onExport` is not provided, the component exports a CSV file automatically using the current processed table data (including active filters/search/sorting). The default download file name is `table-export.csv`.
+
 ## Exports
 
 This library exports:
@@ -171,8 +224,6 @@ import TableComponent, {
 
 ### Future Enhancements:
 
-- Implement an export action with exportCallback.
-
 ## Contributing
 
 Contributions are welcome! Please open an issue or submit a pull request.

jest.config.cjs

@@ -3,6 +3,14 @@ module.exports = {
   testEnvironment: "jsdom",
   roots: ["<rootDir>/src"],
   testMatch: ["**/*.test.ts", "**/*.test.tsx"],
+  collectCoverageFrom: [
+    "src/**/*.{ts,tsx}",
+    "!src/**/*.d.ts",
+    "!src/**/*.test.{ts,tsx}",
+    "!src/test/**",
+  ],
+  coverageDirectory: "coverage",
+  coverageReporters: ["text", "text-summary", "lcov", "html"],
   transform: {
     "^.+\\.(ts|tsx)$": [
       "ts-jest",

package.json

@@ -11,7 +11,8 @@
     "type-check": "tsc --noEmit",
     "rollup": "rollup -c --bundleConfigAsCjs",
     "watch": "rollup -c --bundleConfigAsCjs --watch",
-    "test": "jest"
+    "test": "jest",
+    "test:coverage": "jest --coverage"
   },
   "repository": {
     "type": "git",

page/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

page/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@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/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

page/eslint.config.js

@@ -0,0 +1,23 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

page/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>page</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>