@@ -38,10 +38,17 @@ A React table component.
38
38
## Install
39
39
40
40
``` sh
41
- npm i rsuite-table --save
41
+ # use npm
42
+ npm i rsuite-table
43
+
44
+ # or use yarn
45
+ yarn add rsuite-table
46
+
47
+ # or use pnpm
48
+ pnpm add rsuite-table
42
49
```
43
50
44
- ### Usage
51
+ ## Usage
45
52
46
53
``` tsx
47
54
import { Table , Column , HeaderCell , Cell } from ' rsuite-table' ;
@@ -233,13 +240,6 @@ const NameCell = ({ rowData, ...props }) => (
233
240
| scrollPosition | { top :number ,left :number } | The scroll position of the table |
234
241
| scrollTop | (top:number)=>void | Set the number of pixels for vertical scrolling of the table |
235
242
236
- [npm-badge]: https://img.shields.io/npm/v/rsuite-table.svg?style=flat-square
237
- [npm]: https://www.npmjs.com/package/rsuite-table
238
- [coverage-badge]: https://img.shields.io/coveralls/rsuite/rsuite-table.svg?style=flat-square
239
- [coverage]: https://coveralls.io/github/rsuite/rsuite-table
240
- [actions-svg]: https://github.com/rsuite/rsuite-table/workflows/Node.js%20CI/badge.svg?branch=main
241
- [actions-home]: https://github.com/rsuite/rsuite-table/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
242
-
243
243
### Type safety
244
244
245
245
We can pass generic type parameters to Table, Cell etc. for better type-safety when using typescript.
@@ -248,7 +248,7 @@ Passing a render prop to Table is recommended when using TS, as this will ensure
248
248
the right generic type parameter is automatically propagated to the Cell component.
249
249
250
250
```ts
251
- const products: Product[] = [{ name : " Pineapple" } ];
251
+ const products: Product[] = [{ name : ' Pineapple' } ];
252
252
253
253
<Table <Product , string > ref = { table } data = { products } >
254
254
{ ({ Column , HeaderCell , Cell }) => (
@@ -266,7 +266,7 @@ const products: Product[] = [{ name: "Pineapple" }];
266
266
In fact, the type parameter from table can be inferred from the data passed to it, so the type parameter to Table can also be skipped.
267
267
268
268
```ts
269
- const products: Product[] = [{ name : " Pineapple" } ];
269
+ const products: Product[] = [{ name : ' Pineapple' } ];
270
270
271
271
<Table data = { products } >
272
272
{ ({ Column , HeaderCell , Cell }) => (
@@ -284,16 +284,25 @@ When writing reusable components, it is recommended to make your components gene
284
284
285
285
```ts
286
286
interface ImageCellProps<TKey extends string, TRow extends Record<TKey, string >> {
287
- rowData : TRow ,
288
- dataKey : TKey ,
287
+ rowData : TRow ;
288
+ dataKey : TKey ;
289
289
// ... any other props
290
290
}
291
291
292
- const ImageCell = <TKey extends string, TRow extends Record<TKey, string >>(
293
- { rowData , dataKey , ... rest } : ImageCellProps<TKey, TRow>
294
- ) => (
292
+ const ImageCell = <TKey extends string, TRow extends Record<TKey, string >>({
293
+ rowData ,
294
+ dataKey ,
295
+ ... rest
296
+ } : ImageCellProps<TKey, TRow>) => (
295
297
<Cell <TRow , TKey > { ... rest } >
296
298
<img src = { rowData [dataKey ]} width = " 50" />
297
299
</Cell >
298
300
);
299
301
```
302
+
303
+ [npm-badge]: https://img.shields.io/npm/v/rsuite-table.svg?style=flat-square
304
+ [npm]: https://www.npmjs.com/package/rsuite-table
305
+ [coverage-badge]: https://img.shields.io/coveralls/rsuite/rsuite-table.svg?style=flat-square
306
+ [coverage]: https://coveralls.io/github/rsuite/rsuite-table
307
+ [actions-svg]: https://github.com/rsuite/rsuite-table/workflows/Node.js%20CI/badge.svg?branch=main
308
+ [actions-home]: https://github.com/rsuite/rsuite-table/actions?query=branch%3Amain+workflow%3A%22Node.js+CI%22
0 commit comments