feat: allow custom features (#5415)

* feat: initial refactor for allowing custom features * add example and docs for custom features * regen lock file * update link * proofread feature docs * add declaration merging caveat
TanStack · Mar 19, 2024 · 707a5b4 · 707a5b4
1 parent 01129cb
commit 707a5b4
Show file tree

Hide file tree

Showing 34 changed files with 1,028 additions and 73 deletions.
diff --git a/docs/api/core/table.md b/docs/api/core/table.md
@@ -168,6 +168,14 @@ debugRows?: boolean
 
 Set this option to true to output row debugging information to the console.
 
+### `_features`
+
+```tsx
+_features?: TableFeature[]
+```
+
+An array of extra features that you can add to the table instance.
+
 ### `render`
 
 > ⚠️ This option is only necessary if you are implementing a table adapter.

diff --git a/docs/config.json b/docs/config.json
@@ -175,6 +175,10 @@
         {
           "label": "Virtualization",
           "to": "guide/virtualization"
+        },
+        {
+          "label": "Custom Features",
+          "to": "guide/custom-features"
         }
       ]
     },
@@ -391,6 +395,10 @@
             {
               "to": "framework/react/examples/full-width-resizable-table",
               "label": "React Full Width Resizable"
+            },
+            {
+              "to": "framework/react/examples/custom-features",
+              "label": "Custom Features"
             }
           ]
         },

diff --git a/docs/guide/custom-features.md b/docs/guide/custom-features.md
diff --git a/examples/react/basic/src/main.tsx b/examples/react/basic/src/main.tsx
@@ -79,7 +79,7 @@ const columns = [
 ]
 
 function App() {
-  const [data, setData] = React.useState(() => [...defaultData])
+  const [data, _setData] = React.useState(() => [...defaultData])
   const rerender = React.useReducer(() => ({}), {})[1]
 
   const table = useReactTable({

diff --git a/examples/react/custom-features/.gitignore b/examples/react/custom-features/.gitignore
@@ -0,0 +1,5 @@
+node_modules
+.DS_Store
+dist
+dist-ssr
+*.local
diff --git a/examples/react/custom-features/README.md b/examples/react/custom-features/README.md
@@ -0,0 +1,6 @@
+# Example
+
+To run this example:
+
+- `npm install` or `yarn`
+- `npm run start` or `yarn start`
diff --git a/examples/react/custom-features/index.html b/examples/react/custom-features/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite App</title>
+    <script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/examples/react/custom-features/package.json b/examples/react/custom-features/package.json
@@ -0,0 +1,24 @@
+{
+  "name": "tanstack-table-example-custom-features",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "serve": "vite preview",
+    "start": "vite"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^8.4.1",
+    "@tanstack/react-table": "^8.13.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@rollup/plugin-replace": "^5.0.5",
+    "@types/react": "^18.2.48",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "vite": "^5.0.11"
+  }
+}
diff --git a/examples/react/custom-features/src/index.css b/examples/react/custom-features/src/index.css
@@ -0,0 +1,34 @@
+html {
+  font-family: sans-serif;
+  font-size: 14px;
+}
+
+table {
+  border: 1px solid lightgray;
+}
+
+tbody {
+  border-bottom: 1px solid lightgray;
+}
+
+th {
+  border-bottom: 1px solid lightgray;
+  border-right: 1px solid lightgray;
+  padding: 2px 4px;
+}
+
+tfoot {
+  color: gray;
+}
+
+tfoot th {
+  font-weight: normal;
+}
+
+tr {
+  border-bottom: 1px solid lightgray;
+}
+
+button:disabled {
+  opacity: 0.5;
+}