@xyo-network/react-table 2.36.23 → 2.36.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/dist/cjs/components/TableEx/TableEx.d.ts +2 -1
  2. package/dist/cjs/components/TableEx/TableEx.d.ts.map +1 -1
  3. package/dist/cjs/components/TableEx/TableEx.js +11 -8
  4. package/dist/cjs/components/TableEx/TableEx.js.map +1 -1
  5. package/dist/docs.json +97 -20
  6. package/dist/esm/components/TableEx/TableEx.d.ts +2 -1
  7. package/dist/esm/components/TableEx/TableEx.d.ts.map +1 -1
  8. package/dist/esm/components/TableEx/TableEx.js +10 -6
  9. package/dist/esm/components/TableEx/TableEx.js.map +1 -1
  10. package/package.json +1 -1
  11. package/src/components/TableEx/TableEx.stories.tsx +5 -1
  12. package/src/components/TableEx/TableEx.tsx +17 -7
package/dist/cjs/components/TableEx/TableEx.d.ts CHANGED
@@ -4,5 +4,6 @@ import { TableExVariants } from './lib';
4
4
  export interface TableExProps extends PropsWithChildren, TableProps {
5
5
  variant?: TableExVariants;
6
6
  }
7
- export declare const TableEx: React.FC<TableExProps>;
7
+ export declare const TableExWithRef: React.FC<TableExProps>;
8
+ export declare const TableEx: import("react").FC<TableExProps>;
8
9
  //# sourceMappingURL=TableEx.d.ts.map
package/dist/cjs/components/TableEx/TableEx.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableEx.d.ts","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,YAAa,SAAQ,iBAAiB,EAAE,UAAU;IACjE,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B;AAMD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAM1C,CAAA"}
1
+ {"version":3,"file":"TableEx.d.ts","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,YAAa,SAAQ,iBAAiB,EAAE,UAAU;IACjE,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B;AAYD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMhD,CAAA;AAIF,eAAO,MAAM,OAAO,kCAAiB,CAAA"}
package/dist/cjs/components/TableEx/TableEx.js CHANGED
@@ -1,16 +1,19 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.TableEx = void 0;
3
+ exports.TableEx = exports.TableExWithRef = void 0;
4
4
  const tslib_1 = require("tslib");
5
5
  const jsx_runtime_1 = require("react/jsx-runtime");
6
6
  const material_1 = require("@mui/material");
7
- const TableExInner = (_a) => {
7
+ const react_1 = require("react");
8
+ const TableExInner = (0, react_1.forwardRef)((_a, ref) => {
8
9
  var { children } = _a, props = tslib_1.__rest(_a, ["children"]);
9
- return (0, jsx_runtime_1.jsx)(material_1.Table, Object.assign({}, props, { children: children }));
10
- };
11
- const TableEx = (_a) => {
10
+ return ((0, jsx_runtime_1.jsx)(material_1.Table, Object.assign({ ref: ref }, props, { children: children })));
11
+ });
12
+ TableExInner.displayName = 'TableExInner';
13
+ exports.TableExWithRef = (0, react_1.forwardRef)((_a, ref) => {
12
14
  var { variant, children } = _a, props = tslib_1.__rest(_a, ["variant", "children"]);
13
- return ((0, jsx_runtime_1.jsx)(TableExInner, Object.assign({ stickyHeader: variant === 'scrollable' }, props, { children: children })));
14
- };
15
- exports.TableEx = TableEx;
15
+ return ((0, jsx_runtime_1.jsx)(TableExInner, Object.assign({ stickyHeader: variant === 'scrollable', ref: ref }, props, { children: children })));
16
+ });
17
+ exports.TableExWithRef.displayName = 'TableEx';
18
+ exports.TableEx = exports.TableExWithRef;
16
19
  //# sourceMappingURL=TableEx.js.map
package/dist/cjs/components/TableEx/TableEx.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableEx.js","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiD;AASjD,MAAM,YAAY,GAA2B,CAAC,EAAsB,EAAE,EAAE;QAA1B,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAApB,YAAsB,CAAF;IAChE,OAAO,uBAAC,gBAAK,oBAAK,KAAK,cAAG,QAAQ,IAAS,CAAA;AAC7C,CAAC,CAAA;AAEM,MAAM,OAAO,GAA2B,CAAC,EAA+B,EAAE,EAAE;QAAnC,EAAE,OAAO,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAA7B,uBAA+B,CAAF;IAC3E,OAAO,CACL,uBAAC,YAAY,kBAAC,YAAY,EAAE,OAAO,KAAK,YAAY,IAAM,KAAK,cAC5D,QAAQ,IACI,CAChB,CAAA;AACH,CAAC,CAAA;AANY,QAAA,OAAO,WAMnB"}
1
+ {"version":3,"file":"TableEx.js","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":";;;;;AAAA,4CAAiD;AACjD,iCAAqD;AAQrD,MAAM,YAAY,GAA2B,IAAA,kBAAU,EAAC,CAAC,EAAsB,EAAE,GAAG,EAAE,EAAE;QAA/B,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAApB,YAAsB,CAAF;IAC3E,OAAO,CACL,uBAAC,gBAAK,kBAAC,GAAG,EAAE,GAAG,IAAM,KAAK,cACvB,QAAQ,IACH,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAE5B,QAAA,cAAc,GAA2B,IAAA,kBAAU,EAAC,CAAC,EAA+B,EAAE,GAAG,EAAE,EAAE;QAAxC,EAAE,OAAO,EAAE,QAAQ,OAAY,EAAP,KAAK,sBAA7B,uBAA+B,CAAF;IAC7F,OAAO,CACL,uBAAC,YAAY,kBAAC,YAAY,EAAE,OAAO,KAAK,YAAY,EAAE,GAAG,EAAE,GAAG,IAAM,KAAK,cACtE,QAAQ,IACI,CAChB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,sBAAc,CAAC,WAAW,GAAG,SAAS,CAAA;AAEzB,QAAA,OAAO,GAAG,sBAAc,CAAA"}
package/dist/docs.json CHANGED
@@ -26,7 +26,7 @@
26
26
  "fileName": "packages/sdk/packages/table/src/components/TableEx/TableEx.tsx",
27
27
  "line": 7,
28
28
  "character": 2,
29
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7828dd35d4/packages/sdk/packages/table/src/components/TableEx/TableEx.tsx#L7"
29
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/components/TableEx/TableEx.tsx#L7"
30
30
  }
31
31
  ],
32
32
  "type": {
@@ -48,7 +48,7 @@
48
48
  "fileName": "packages/sdk/packages/table/src/components/TableEx/TableEx.tsx",
49
49
  "line": 6,
50
50
  "character": 17,
51
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7828dd35d4/packages/sdk/packages/table/src/components/TableEx/TableEx.tsx#L6"
51
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/components/TableEx/TableEx.tsx#L6"
52
52
  }
53
53
  ],
54
54
  "extendedTypes": [
@@ -67,14 +67,14 @@
67
67
  ]
68
68
  },
69
69
  {
70
- "id": 7,
70
+ "id": 11,
71
71
  "name": "TableFooterExProps",
72
72
  "kind": 256,
73
73
  "kindString": "Interface",
74
74
  "flags": {},
75
75
  "children": [
76
76
  {
77
- "id": 8,
77
+ "id": 12,
78
78
  "name": "variant",
79
79
  "kind": 1024,
80
80
  "kindString": "Property",
@@ -86,7 +86,7 @@
86
86
  "fileName": "packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx",
87
87
  "line": 21,
88
88
  "character": 2,
89
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7828dd35d4/packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx#L21"
89
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx#L21"
90
90
  }
91
91
  ],
92
92
  "type": {
@@ -99,7 +99,7 @@
99
99
  {
100
100
  "title": "Properties",
101
101
  "children": [
102
- 8
102
+ 12
103
103
  ]
104
104
  }
105
105
  ],
@@ -108,7 +108,7 @@
108
108
  "fileName": "packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx",
109
109
  "line": 20,
110
110
  "character": 17,
111
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7828dd35d4/packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx#L20"
111
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx#L20"
112
112
  }
113
113
  ],
114
114
  "extendedTypes": [
@@ -127,7 +127,7 @@
127
127
  ]
128
128
  },
129
129
  {
130
- "id": 3,
130
+ "id": 7,
131
131
  "name": "TableEx",
132
132
  "kind": 64,
133
133
  "kindString": "Function",
@@ -135,18 +135,94 @@
135
135
  "sources": [
136
136
  {
137
137
  "fileName": "packages/sdk/packages/table/src/components/TableEx/TableEx.tsx",
138
- "line": 14,
138
+ "line": 30,
139
139
  "character": 13,
140
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7828dd35d4/packages/sdk/packages/table/src/components/TableEx/TableEx.tsx#L14"
140
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/components/TableEx/TableEx.tsx#L30"
141
141
  }
142
142
  ],
143
143
  "signatures": [
144
144
  {
145
- "id": 4,
145
+ "id": 8,
146
146
  "name": "TableEx",
147
147
  "kind": 4096,
148
148
  "kindString": "Call signature",
149
149
  "flags": {},
150
+ "parameters": [
151
+ {
152
+ "id": 9,
153
+ "name": "props",
154
+ "kind": 32768,
155
+ "kindString": "Parameter",
156
+ "flags": {},
157
+ "type": {
158
+ "type": "reference",
159
+ "id": 1,
160
+ "name": "TableExProps"
161
+ }
162
+ },
163
+ {
164
+ "id": 10,
165
+ "name": "context",
166
+ "kind": 32768,
167
+ "kindString": "Parameter",
168
+ "flags": {
169
+ "isOptional": true
170
+ },
171
+ "type": {
172
+ "type": "intrinsic",
173
+ "name": "any"
174
+ }
175
+ }
176
+ ],
177
+ "type": {
178
+ "type": "union",
179
+ "types": [
180
+ {
181
+ "type": "literal",
182
+ "value": null
183
+ },
184
+ {
185
+ "type": "reference",
186
+ "typeArguments": [
187
+ {
188
+ "type": "intrinsic",
189
+ "name": "any"
190
+ },
191
+ {
192
+ "type": "intrinsic",
193
+ "name": "any"
194
+ }
195
+ ],
196
+ "name": "ReactElement",
197
+ "qualifiedName": "React.ReactElement",
198
+ "package": "@types/react"
199
+ }
200
+ ]
201
+ }
202
+ }
203
+ ]
204
+ },
205
+ {
206
+ "id": 3,
207
+ "name": "TableExWithRef",
208
+ "kind": 64,
209
+ "kindString": "Function",
210
+ "flags": {},
211
+ "sources": [
212
+ {
213
+ "fileName": "packages/sdk/packages/table/src/components/TableEx/TableEx.tsx",
214
+ "line": 20,
215
+ "character": 13,
216
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/components/TableEx/TableEx.tsx#L20"
217
+ }
218
+ ],
219
+ "signatures": [
220
+ {
221
+ "id": 4,
222
+ "name": "TableExWithRef",
223
+ "kind": 4096,
224
+ "kindString": "Call signature",
225
+ "flags": {},
150
226
  "parameters": [
151
227
  {
152
228
  "id": 5,
@@ -203,7 +279,7 @@
203
279
  ]
204
280
  },
205
281
  {
206
- "id": 9,
282
+ "id": 13,
207
283
  "name": "TableFooterEx",
208
284
  "kind": 64,
209
285
  "kindString": "Function",
@@ -213,31 +289,31 @@
213
289
  "fileName": "packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx",
214
290
  "line": 24,
215
291
  "character": 13,
216
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7828dd35d4/packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx#L24"
292
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/components/TableEx/TableFooterEx.tsx#L24"
217
293
  }
218
294
  ],
219
295
  "signatures": [
220
296
  {
221
- "id": 10,
297
+ "id": 14,
222
298
  "name": "TableFooterEx",
223
299
  "kind": 4096,
224
300
  "kindString": "Call signature",
225
301
  "flags": {},
226
302
  "parameters": [
227
303
  {
228
- "id": 11,
304
+ "id": 15,
229
305
  "name": "props",
230
306
  "kind": 32768,
231
307
  "kindString": "Parameter",
232
308
  "flags": {},
233
309
  "type": {
234
310
  "type": "reference",
235
- "id": 7,
311
+ "id": 11,
236
312
  "name": "TableFooterExProps"
237
313
  }
238
314
  },
239
315
  {
240
- "id": 12,
316
+ "id": 16,
241
317
  "name": "context",
242
318
  "kind": 32768,
243
319
  "kindString": "Parameter",
@@ -284,14 +360,15 @@
284
360
  "title": "Interfaces",
285
361
  "children": [
286
362
  1,
287
- 7
363
+ 11
288
364
  ]
289
365
  },
290
366
  {
291
367
  "title": "Functions",
292
368
  "children": [
369
+ 7,
293
370
  3,
294
- 9
371
+ 13
295
372
  ]
296
373
  }
297
374
  ],
@@ -300,7 +377,7 @@
300
377
  "fileName": "packages/sdk/packages/table/src/index.ts",
301
378
  "line": 1,
302
379
  "character": 0,
303
- "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/7828dd35d4/packages/sdk/packages/table/src/index.ts#L1"
380
+ "url": "https://github.com/XYOracleNetwork/sdk-xyo-react-js/blob/ab04c39d/packages/sdk/packages/table/src/index.ts#L1"
304
381
  }
305
382
  ]
306
383
  }
package/dist/esm/components/TableEx/TableEx.d.ts CHANGED
@@ -4,5 +4,6 @@ import { TableExVariants } from './lib';
4
4
  export interface TableExProps extends PropsWithChildren, TableProps {
5
5
  variant?: TableExVariants;
6
6
  }
7
- export declare const TableEx: React.FC<TableExProps>;
7
+ export declare const TableExWithRef: React.FC<TableExProps>;
8
+ export declare const TableEx: import("react").FC<TableExProps>;
8
9
  //# sourceMappingURL=TableEx.d.ts.map
package/dist/esm/components/TableEx/TableEx.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableEx.d.ts","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,YAAa,SAAQ,iBAAiB,EAAE,UAAU;IACjE,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B;AAMD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAM1C,CAAA"}
1
+ {"version":3,"file":"TableEx.d.ts","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAS,UAAU,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAErD,OAAO,EAAE,eAAe,EAAE,MAAM,OAAO,CAAA;AAEvC,MAAM,WAAW,YAAa,SAAQ,iBAAiB,EAAE,UAAU;IACjE,OAAO,CAAC,EAAE,eAAe,CAAA;CAC1B;AAYD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CAMhD,CAAA;AAIF,eAAO,MAAM,OAAO,kCAAiB,CAAA"}
package/dist/esm/components/TableEx/TableEx.js CHANGED
@@ -1,9 +1,13 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
2
  import { Table } from '@mui/material';
3
- const TableExInner = ({ children, ...props }) => {
4
- return _jsx(Table, { ...props, children: children });
5
- };
6
- export const TableEx = ({ variant, children, ...props }) => {
7
- return (_jsx(TableExInner, { stickyHeader: variant === 'scrollable', ...props, children: children }));
8
- };
3
+ import { forwardRef } from 'react';
4
+ const TableExInner = forwardRef(({ children, ...props }, ref) => {
5
+ return (_jsx(Table, { ref: ref, ...props, children: children }));
6
+ });
7
+ TableExInner.displayName = 'TableExInner';
8
+ export const TableExWithRef = forwardRef(({ variant, children, ...props }, ref) => {
9
+ return (_jsx(TableExInner, { stickyHeader: variant === 'scrollable', ref: ref, ...props, children: children }));
10
+ });
11
+ TableExWithRef.displayName = 'TableEx';
12
+ export const TableEx = TableExWithRef;
9
13
  //# sourceMappingURL=TableEx.js.map
package/dist/esm/components/TableEx/TableEx.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"TableEx.js","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,MAAM,eAAe,CAAA;AASjD,MAAM,YAAY,GAA2B,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACtE,OAAO,KAAC,KAAK,OAAK,KAAK,YAAG,QAAQ,GAAS,CAAA;AAC7C,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAA2B,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE;IACjF,OAAO,CACL,KAAC,YAAY,IAAC,YAAY,EAAE,OAAO,KAAK,YAAY,KAAM,KAAK,YAC5D,QAAQ,GACI,CAChB,CAAA;AACH,CAAC,CAAA"}
1
+ {"version":3,"file":"TableEx.js","sourceRoot":"","sources":["../../../../src/components/TableEx/TableEx.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAc,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,UAAU,EAAqB,MAAM,OAAO,CAAA;AAQrD,MAAM,YAAY,GAA2B,UAAU,CAAC,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACtF,OAAO,CACL,KAAC,KAAK,IAAC,GAAG,EAAE,GAAG,KAAM,KAAK,YACvB,QAAQ,GACH,CACT,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,YAAY,CAAC,WAAW,GAAG,cAAc,CAAA;AAEzC,MAAM,CAAC,MAAM,cAAc,GAA2B,UAAU,CAAC,CAAC,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,GAAG,EAAE,EAAE;IACxG,OAAO,CACL,KAAC,YAAY,IAAC,YAAY,EAAE,OAAO,KAAK,YAAY,EAAE,GAAG,EAAE,GAAG,KAAM,KAAK,YACtE,QAAQ,GACI,CAChB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,cAAc,CAAC,WAAW,GAAG,SAAS,CAAA;AAEtC,MAAM,CAAC,MAAM,OAAO,GAAG,cAAc,CAAA"}
package/package.json CHANGED
@@ -60,5 +60,5 @@
60
60
  },
61
61
  "sideEffects": false,
62
62
  "types": "dist/esm/index.d.ts",
63
- "version": "2.36.23"
63
+ "version": "2.36.25"
64
64
  }
package/src/components/TableEx/TableEx.stories.tsx CHANGED
@@ -1,6 +1,7 @@
1
1
  /* eslint-disable import/no-internal-modules */
2
2
  import { TableBody, TableCell, TableHead, TablePagination, TableRow, useTheme } from '@mui/material'
3
3
  import { ComponentMeta, ComponentStory, DecoratorFn } from '@storybook/react'
4
+ import { WithRefDecorator } from '@xyo-network/react-storybook'
4
5
 
5
6
  import { TableEx } from './TableEx'
6
7
  import { TableFooterEx } from './TableFooterEx'
@@ -73,11 +74,14 @@ const Template: ComponentStory<typeof TableEx> = (args) => {
73
74
  const Default = Template.bind({})
74
75
  Default.args = {}
75
76
 
77
+ const WithRef = Template.bind({})
78
+ WithRef.decorators = [WithRefDecorator]
79
+
76
80
  const WithScrollable = Template.bind({})
77
81
  WithScrollable.args = { variant: 'scrollable' }
78
82
  WithScrollable.decorators = [ScrollableDecoratorFn]
79
83
 
80
- export { Default, WithScrollable }
84
+ export { Default, WithRef, WithScrollable }
81
85
 
82
86
  // eslint-disable-next-line import/no-default-export
83
87
  export default StorybookEntry
package/src/components/TableEx/TableEx.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { Table, TableProps } from '@mui/material'
2
- import { PropsWithChildren } from 'react'
2
+ import { forwardRef, PropsWithChildren } from 'react'
3
3
 
4
4
  import { TableExVariants } from './lib'
5
5
 
@@ -7,14 +7,24 @@ export interface TableExProps extends PropsWithChildren, TableProps {
7
7
  variant?: TableExVariants
8
8
  }
9
9
 
10
- const TableExInner: React.FC<TableExProps> = ({ children, ...props }) => {
11
- return <Table {...props}>{children}</Table>
12
- }
10
+ const TableExInner: React.FC<TableExProps> = forwardRef(({ children, ...props }, ref) => {
11
+ return (
12
+ <Table ref={ref} {...props}>
13
+ {children}
14
+ </Table>
15
+ )
16
+ })
13
17
 
14
- export const TableEx: React.FC<TableExProps> = ({ variant, children, ...props }) => {
18
+ TableExInner.displayName = 'TableExInner'
19
+
20
+ export const TableExWithRef: React.FC<TableExProps> = forwardRef(({ variant, children, ...props }, ref) => {
15
21
  return (
16
- <TableExInner stickyHeader={variant === 'scrollable'} {...props}>
22
+ <TableExInner stickyHeader={variant === 'scrollable'} ref={ref} {...props}>
17
23
  {children}
18
24
  </TableExInner>
19
25
  )
20
- }
26
+ })
27
+
28
+ TableExWithRef.displayName = 'TableEx'
29
+
30
+ export const TableEx = TableExWithRef