Skip to content

Commit 707a5b4

Browse files
KevinVandyKevinVandy
authored
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
1 parent 01129cb commit 707a5b4

34 files changed

+1028
-73
lines changed

‎docs/api/core/table.md

+8
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,14 @@ debugRows?: boolean
168168

169169
Set this option to true to output row debugging information to the console.
170170

171+
### `_features`
172+
173+
```tsx
174+
_features?: TableFeature[]
175+
```
176+
177+
An array of extra features that you can add to the table instance.
178+
171179
### `render`
172180

173181
> ⚠️ This option is only necessary if you are implementing a table adapter.

‎docs/config.json

+8
Original file line numberDiff line numberDiff line change
@@ -175,6 +175,10 @@
175175
{
176176
"label": "Virtualization",
177177
"to": "guide/virtualization"
178+
},
179+
{
180+
"label": "Custom Features",
181+
"to": "guide/custom-features"
178182
}
179183
]
180184
},
@@ -391,6 +395,10 @@
391395
{
392396
"to": "framework/react/examples/full-width-resizable-table",
393397
"label": "React Full Width Resizable"
398+
},
399+
{
400+
"to": "framework/react/examples/custom-features",
401+
"label": "Custom Features"
394402
}
395403
]
396404
},

‎docs/guide/custom-features.md

+269
Large diffs are not rendered by default.

‎examples/react/basic/src/main.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ const columns = [
7979
]
8080

8181
function App() {
82-
const [data, setData] = React.useState(() => [...defaultData])
82+
const [data, _setData] = React.useState(() => [...defaultData])
8383
const rerender = React.useReducer(() => ({}), {})[1]
8484

8585
const table = useReactTable({

‎examples/react/custom-features/.gitignore

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
node_modules
2+
.DS_Store
3+
dist
4+
dist-ssr
5+
*.local

‎examples/react/custom-features/README.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
# Example
2+
3+
To run this example:
4+
5+
- `npm install` or `yarn`
6+
- `npm run start` or `yarn start`

‎examples/react/custom-features/index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Vite App</title>
7+
<script type="module" src="https://cdn.skypack.dev/twind/shim"></script>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.tsx"></script>
12+
</body>
13+
</html>

‎examples/react/custom-features/package.json

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"name": "tanstack-table-example-custom-features",
3+
"version": "0.0.0",
4+
"private": true,
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"serve": "vite preview",
9+
"start": "vite"
10+
},
11+
"dependencies": {
12+
"@faker-js/faker": "^8.4.1",
13+
"@tanstack/react-table": "^8.13.2",
14+
"react": "^18.2.0",
15+
"react-dom": "^18.2.0"
16+
},
17+
"devDependencies": {
18+
"@rollup/plugin-replace": "^5.0.5",
19+
"@types/react": "^18.2.48",
20+
"@types/react-dom": "^18.2.18",
21+
"@vitejs/plugin-react": "^4.2.1",
22+
"vite": "^5.0.11"
23+
}
24+
}

‎examples/react/custom-features/src/index.css

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
html {
2+
font-family: sans-serif;
3+
font-size: 14px;
4+
}
5+
6+
table {
7+
border: 1px solid lightgray;
8+
}
9+
10+
tbody {
11+
border-bottom: 1px solid lightgray;
12+
}
13+
14+
th {
15+
border-bottom: 1px solid lightgray;
16+
border-right: 1px solid lightgray;
17+
padding: 2px 4px;
18+
}
19+
20+
tfoot {
21+
color: gray;
22+
}
23+
24+
tfoot th {
25+
font-weight: normal;
26+
}
27+
28+
tr {
29+
border-bottom: 1px solid lightgray;
30+
}
31+
32+
button:disabled {
33+
opacity: 0.5;
34+
}

0 commit comments

Comments
 (0)