@iress-oss/ids-mcp-server 0.0.1-dev.3 → 0.0.1

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 (122) hide show
  1. package/LICENSE +193 -0
  2. package/README.md +159 -29
  3. package/build/componentHandlers.js +205 -0
  4. package/{dist → build}/config.js +5 -5
  5. package/build/index.js +51 -0
  6. package/{dist → build}/iressHandlers.js +46 -52
  7. package/{dist → build}/resourceHandlers.js +22 -23
  8. package/{dist → build}/searchHandlers.js +92 -107
  9. package/{dist → build}/toolHandler.js +13 -13
  10. package/build/tools.js +165 -0
  11. package/{dist → build}/utils.js +15 -11
  12. package/docs/api-reference.md +0 -0
  13. package/docs/best-practices.md +0 -0
  14. package/docs/configuration.md +0 -0
  15. package/docs/examples.md +0 -0
  16. package/docs/guidelines.md +269 -0
  17. package/{generated/docs → docs/ids}/components-autocomplete-docs.md +6 -6
  18. package/{generated/docs → docs/ids}/components-autocomplete-recipes-docs.md +51 -17
  19. package/{generated/docs → docs/ids}/components-card-recipes-docs.md +1 -1
  20. package/{generated/docs → docs/ids}/components-checkbox-docs.md +19 -6
  21. package/{generated/docs → docs/ids}/components-checkboxgroup-docs.md +18 -18
  22. package/{generated/docs → docs/ids}/components-checkboxgroup-recipes-docs.md +9 -9
  23. package/{generated/docs → docs/ids}/components-col-docs.md +1 -1
  24. package/{generated/docs → docs/ids}/components-combobox-docs.md +6 -6
  25. package/{generated/docs → docs/ids}/components-container-docs.md +42 -8
  26. package/{generated/docs → docs/ids}/components-filter-docs.md +65 -12
  27. package/{generated/docs → docs/ids}/components-form-docs.md +335 -341
  28. package/{generated/docs → docs/ids}/components-form-recipes-docs.md +1 -198
  29. package/{generated/docs → docs/ids}/components-hide-docs.md +70 -16
  30. package/{generated/docs → docs/ids}/components-icon-docs.md +4 -4
  31. package/{generated/docs → docs/ids}/components-input-recipes-docs.md +2 -2
  32. package/{generated/docs → docs/ids}/components-inputcurrency-recipes-docs.md +40 -6
  33. package/{generated/docs → docs/ids}/components-modal-docs.md +113 -3
  34. package/docs/ids/components-popover-docs.md +4 -0
  35. package/{generated/docs → docs/ids}/components-radiogroup-docs.md +21 -21
  36. package/{generated/docs → docs/ids}/components-richselect-docs.md +111 -149
  37. package/{generated/docs → docs/ids}/components-row-docs.md +4 -4
  38. package/{generated/docs → docs/ids}/components-skeleton-docs.md +3 -3
  39. package/{generated/docs → docs/ids}/components-skeleton-recipes-docs.md +1 -1
  40. package/{generated/docs → docs/ids}/components-skiplink-docs.md +1 -1
  41. package/{generated/docs → docs/ids}/components-slideout-docs.md +113 -3
  42. package/{generated/docs → docs/ids}/components-table-ag-grid-docs.md +137 -109
  43. package/{generated/docs → docs/ids}/components-table-docs.md +597 -92
  44. package/{generated/docs → docs/ids}/components-tabset-docs.md +2 -2
  45. package/{generated/docs → docs/ids}/components-tag-docs.md +1 -1
  46. package/{generated/docs → docs/ids}/components-toaster-docs.md +5 -5
  47. package/{generated/docs → docs/ids}/foundations-colours-docs.md +1 -1
  48. package/{generated/docs → docs/ids}/foundations-typography-docs.md +2 -7
  49. package/{generated/docs → docs/ids}/get-started-develop-docs.md +3 -3
  50. package/{generated/docs → docs/ids}/introduction-docs.md +4 -4
  51. package/{generated/docs → docs/ids}/patterns-loading-docs.md +2 -332
  52. package/docs/ids/resources-migration-guides-from-v4-to-v5-docs.md +639 -0
  53. package/docs/ids/themes-available-themes-docs.md +74 -0
  54. package/docs/ids/themes-tokens-docs.md +4580 -0
  55. package/docs/ids/versions-docs.md +27 -0
  56. package/docs/tutorials/basic-integration.md +0 -0
  57. package/package.json +15 -44
  58. package/LICENSE.txt +0 -201
  59. package/dist/componentHandlers.js +0 -241
  60. package/dist/componentHandlers.test.js +0 -380
  61. package/dist/index.js +0 -53
  62. package/dist/iressHandlers.test.js +0 -316
  63. package/dist/resourceHandlers.test.js +0 -352
  64. package/dist/searchHandlers.test.js +0 -524
  65. package/dist/toolHandler.test.js +0 -369
  66. package/dist/tools.js +0 -165
  67. package/dist/utils.test.js +0 -286
  68. package/generated/docs/components-popover-docs.md +0 -464
  69. package/generated/docs/foundations-accessibility-docs.md +0 -62
  70. package/generated/docs/foundations-consistency-docs.md +0 -52
  71. package/generated/docs/foundations-content-docs.md +0 -23
  72. package/generated/docs/foundations-introduction-docs.md +0 -17
  73. package/generated/docs/foundations-principles-docs.md +0 -70
  74. package/generated/docs/foundations-user-experience-docs.md +0 -63
  75. package/generated/docs/foundations-visual-design-docs.md +0 -46
  76. package/generated/docs/guidelines.md +0 -812
  77. package/generated/docs/resources-migration-guides-from-v4-to-v5-docs.md +0 -437
  78. package/generated/docs/themes-available-themes-docs.md +0 -66
  79. package/generated/docs/themes-tokens-docs.md +0 -1200
  80. package/generated/docs/versions-docs.md +0 -17
  81. /package/{dist → build}/types.js +0 -0
  82. /package/{generated/docs → docs/ids}/components-alert-docs.md +0 -0
  83. /package/{generated/docs → docs/ids}/components-badge-docs.md +0 -0
  84. /package/{generated/docs → docs/ids}/components-button-docs.md +0 -0
  85. /package/{generated/docs → docs/ids}/components-button-recipes-docs.md +0 -0
  86. /package/{generated/docs → docs/ids}/components-buttongroup-docs.md +0 -0
  87. /package/{generated/docs → docs/ids}/components-card-docs.md +0 -0
  88. /package/{generated/docs → docs/ids}/components-divider-docs.md +0 -0
  89. /package/{generated/docs → docs/ids}/components-expander-docs.md +0 -0
  90. /package/{generated/docs → docs/ids}/components-field-docs.md +0 -0
  91. /package/{generated/docs → docs/ids}/components-inline-docs.md +0 -0
  92. /package/{generated/docs → docs/ids}/components-input-docs.md +0 -0
  93. /package/{generated/docs → docs/ids}/components-inputcurrency-docs.md +0 -0
  94. /package/{generated/docs → docs/ids}/components-label-docs.md +0 -0
  95. /package/{generated/docs → docs/ids}/components-menu-docs.md +0 -0
  96. /package/{generated/docs → docs/ids}/components-menu-menuitem-docs.md +0 -0
  97. /package/{generated/docs → docs/ids}/components-navbar-docs.md +0 -0
  98. /package/{generated/docs → docs/ids}/components-navbar-recipes-docs.md +0 -0
  99. /package/{generated/docs → docs/ids}/components-panel-docs.md +0 -0
  100. /package/{generated/docs → docs/ids}/components-placeholder-docs.md +0 -0
  101. /package/{generated/docs → docs/ids}/components-popover-recipes-docs.md +0 -0
  102. /package/{generated/docs → docs/ids}/components-progress-docs.md +0 -0
  103. /package/{generated/docs → docs/ids}/components-radio-docs.md +0 -0
  104. /package/{generated/docs → docs/ids}/components-readonly-docs.md +0 -0
  105. /package/{generated/docs → docs/ids}/components-select-docs.md +0 -0
  106. /package/{generated/docs → docs/ids}/components-slider-docs.md +0 -0
  107. /package/{generated/docs → docs/ids}/components-spinner-docs.md +0 -0
  108. /package/{generated/docs → docs/ids}/components-stack-docs.md +0 -0
  109. /package/{generated/docs → docs/ids}/components-tabset-tab-docs.md +0 -0
  110. /package/{generated/docs → docs/ids}/components-text-docs.md +0 -0
  111. /package/{generated/docs → docs/ids}/components-toaster-toast-docs.md +0 -0
  112. /package/{generated/docs → docs/ids}/components-toggle-docs.md +0 -0
  113. /package/{generated/docs → docs/ids}/components-tooltip-docs.md +0 -0
  114. /package/{generated/docs → docs/ids}/components-validationmessage-docs.md +0 -0
  115. /package/{generated/docs → docs/ids}/contact-us-docs.md +0 -0
  116. /package/{generated/docs → docs/ids}/extensions-editor-docs.md +0 -0
  117. /package/{generated/docs → docs/ids}/extensions-editor-recipes-docs.md +0 -0
  118. /package/{generated/docs → docs/ids}/frequently-asked-questions-docs.md +0 -0
  119. /package/{generated/docs → docs/ids}/get-started-using-storybook-docs.md +0 -0
  120. /package/{generated/docs → docs/ids}/resources-changelog-docs.md +0 -0
  121. /package/{generated/docs → docs/ids}/resources-code-katas-docs.md +0 -0
  122. /package/{generated/docs → docs/ids}/themes-introduction-docs.md +0 -0
@@ -7,11 +7,38 @@ Overview
7
7
  Data driven component for displaying tabular data.
8
8
 
9
9
  My investments
10
- | Investment Name | Cost | Investment Date | Total Percentage |
11
- | --- | --- | --- | --- |
12
- | Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
13
- | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
14
- | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
10
+
11
+ Investment Name
12
+
13
+ Cost
14
+
15
+ Investment Date
16
+
17
+ Total Percentage
18
+
19
+ Artemis Fund Managers Limited
20
+
21
+ 23898
22
+
23
+ 2019-09-23
24
+
25
+ 24.8
26
+
27
+ CASH.CASH
28
+
29
+ 49751.4
30
+
31
+ 2020-06-28
32
+
33
+ 49
34
+
35
+ VODAFONE GRP
36
+
37
+ 26382.456
38
+
39
+ 2019-02-05
40
+
41
+ 26.2
15
42
 
16
43
  Hide code
17
44
 
@@ -54,11 +81,38 @@ To get started, the `IressTable` component only requires the `caption` and `rows
54
81
  * `rows` are an array of objects, each object represents a row in the table. The table will use the key of the first object to determine the columns, automatically made human readable if the key is camel case, snake case or kebab case.
55
82
 
56
83
  My investments
57
- | Investment Name | Cost | Investment Date | Total Percentage |
58
- | --- | --- | --- | --- |
59
- | Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
60
- | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
61
- | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
84
+
85
+ Investment Name
86
+
87
+ Cost
88
+
89
+ Investment Date
90
+
91
+ Total Percentage
92
+
93
+ Artemis Fund Managers Limited
94
+
95
+ 23898
96
+
97
+ 2019-09-23
98
+
99
+ 24.8
100
+
101
+ CASH.CASH
102
+
103
+ 49751.4
104
+
105
+ 2020-06-28
106
+
107
+ 49
108
+
109
+ VODAFONE GRP
110
+
111
+ 26382.456
112
+
113
+ 2019-02-05
114
+
115
+ 26.2
62
116
 
63
117
  Hide code
64
118
 
@@ -97,11 +151,38 @@ For more control over the columns, the `columns` prop can be used to define the
97
151
  Each array item represents a key in the objects in your `rows` prop. If one of the keys in your `rows` prop is not defined in the `columns` prop, it will not be displayed in the table.
98
152
 
99
153
  My investments
100
- | Investment | Date | Share | Cost |
101
- | --- | --- | --- | --- |
102
- | Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 |
103
- | CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
104
- | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
154
+
155
+ Investment
156
+
157
+ Date
158
+
159
+ Share
160
+
161
+ Cost
162
+
163
+ Artemis Fund Managers Limited
164
+
165
+ 23/09/2019
166
+
167
+ 24.8%
168
+
169
+ $23,898.00
170
+
171
+ CASH.CASH
172
+
173
+ 28/06/2020
174
+
175
+ 49%
176
+
177
+ $49,751.40
178
+
179
+ VODAFONE GRP
180
+
181
+ 05/02/2019
182
+
183
+ 26.2%
184
+
185
+ $26,382.46
105
186
 
106
187
  Hide code
107
188
 
@@ -112,7 +193,7 @@ import {
112
193
  IressTable,
113
194
  IressTableFormattedValue,
114
195
  IressTableProps,
115
- } from '@iress-oss/ids-components';
196
+ } from '@iress/ids-components';
116
197
  type Props \= Partial<IressTableProps<object, never\>>;
117
198
  const renderColumn \= (value: number) \=> (
118
199
  <IressBadge mode\={value \> 30000 ? 'success' : 'danger'}\>
@@ -244,15 +325,48 @@ The table component provides some basic formatting. This is controlled by the `f
244
325
  To completely customise it, you can also send in a function that returns a ReactNode. It has two parameters, the original value and the row it is connected to.
245
326
 
246
327
  Available formats
247
- | String | Number | Date | Short date | ISO Date & Time | Relative time | Currency (AUD) | Percent | Custom |
248
- | --- | --- | --- | --- | --- | --- | --- | --- | --- |
249
- | Hello, world! | 123456 | 28/06/2020 | 28 Jun 2020 | 2020-06-28 00:00:00 (UTC) | 30 seconds ago | 123,456.78 | 12% | Custom |
328
+
329
+ String
330
+
331
+ Number
332
+
333
+ Date
334
+
335
+ Short date
336
+
337
+ ISO Date & Time
338
+
339
+ Relative time
340
+
341
+ Currency (AUD)
342
+
343
+ Percent
344
+
345
+ Custom
346
+
347
+ Hello, world!
348
+
349
+ 123456
350
+
351
+ 28/06/2020
352
+
353
+ 28 Jun 2020
354
+
355
+ 2020-06-28 10:00:00 (AEST)
356
+
357
+ 12 seconds ago
358
+
359
+ 123,456.78
360
+
361
+ 12%
362
+
363
+ Custom
250
364
 
251
365
  Hide code
252
366
 
253
367
  \[data-radix-scroll-area-viewport\] { scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } \[data-radix-scroll-area-viewport\]::-webkit-scrollbar { display: none; } :where(\[data-radix-scroll-area-viewport\]) { display: flex; flex-direction: column; align-items: stretch; } :where(\[data-radix-scroll-area-content\]) { flex-grow: 1; }
254
368
 
255
- import { IressBadge, IressTable, IressTableProps } from '@iress-oss/ids-components';
369
+ import { IressBadge, IressTable, IressTableProps } from '@iress/ids-components';
256
370
  type Props \= Partial<IressTableProps<object, never\>>;
257
371
  const renderColumn \= (value: string) \=> (
258
372
  <IressBadge mode\="info"\>{value}</IressBadge\>
@@ -314,11 +428,38 @@ Sorting can be enabled on a column by setting the `sort` property of the `TableC
314
428
  The sort button has some visually hidden text for screenreaders to signify that the column is sortable. If you need to change this (ie. for translation purposes), it can be done with the `sortableText` column option which defaults to: sortable.
315
429
 
316
430
  My investments
317
- | Investment | Date | Share | Cost |
318
- | --- | --- | --- | --- |
319
- | Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 |
320
- | CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
321
- | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
431
+
432
+ Investment
433
+
434
+ Date
435
+
436
+ Share
437
+
438
+ Cost
439
+
440
+ Artemis Fund Managers Limited
441
+
442
+ 23/09/2019
443
+
444
+ 24.8%
445
+
446
+ $23,898.00
447
+
448
+ CASH.CASH
449
+
450
+ 28/06/2020
451
+
452
+ 49%
453
+
454
+ $49,751.40
455
+
456
+ VODAFONE GRP
457
+
458
+ 05/02/2019
459
+
460
+ 26.2%
461
+
462
+ $26,382.46
322
463
 
323
464
  Hide code
324
465
 
@@ -329,7 +470,7 @@ import {
329
470
  IressTable,
330
471
  IressTableFormattedValue,
331
472
  IressTableProps,
332
- } from '@iress-oss/ids-components';
473
+ } from '@iress/ids-components';
333
474
  type Props \= Partial<IressTableProps<object, never\>>;
334
475
  const renderColumn \= (value: number) \=> (
335
476
  <IressBadge mode\={value \> 30000 ? 'success' : 'danger'}\>
@@ -402,11 +543,38 @@ If you need to customise the sorting logic, you can use the `sortFn` property of
402
543
  * A custom sort function that takes two arguments: `a` and `b`, which are the two rows being compared. It should return `-1`, `0` or `1` depending on the comparison.
403
544
 
404
545
  My investments
405
- | Investment | Date | Share | Cost (sorts by net cost if available) |
406
- | --- | --- | --- | --- |
407
- | Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 (net: N/A) |
408
- | CASH.CASH | 28/06/2020 | 49% | $49,751.40 (net: $20,000.00) |
409
- | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 (net: N/A) |
546
+
547
+ Investment
548
+
549
+ Date
550
+
551
+ Share
552
+
553
+ Cost (sorts by net cost if available)
554
+
555
+ Artemis Fund Managers Limited
556
+
557
+ 23/09/2019
558
+
559
+ 24.8%
560
+
561
+ $23,898.00 (net: N/A)
562
+
563
+ CASH.CASH
564
+
565
+ 28/06/2020
566
+
567
+ 49%
568
+
569
+ $49,751.40 (net: $20,000.00)
570
+
571
+ VODAFONE GRP
572
+
573
+ 05/02/2019
574
+
575
+ 26.2%
576
+
577
+ $26,382.46 (net: N/A)
410
578
 
411
579
  Hide code
412
580
 
@@ -417,7 +585,7 @@ import {
417
585
  IressTableFormattedValue,
418
586
  IressTableProps,
419
587
  TableColumn,
420
- } from '@iress-oss/ids-components';
588
+ } from '@iress/ids-components';
421
589
  type Props \= Partial<IressTableProps<Row, never\>>;
422
590
  interface Row {
423
591
  investment\_name: string;
@@ -509,11 +677,38 @@ The width of a column is controlled by the `width` property on the `TableColumn`
509
677
  When the table exceeds the width of the container, a horizontal scrollbar is triggered. This makes it possible to view larger tables on mobile devices.
510
678
 
511
679
  My investments
512
- | Investment | Cost | Investment date | Share |
513
- | --- | --- | --- | --- |
514
- | Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8% |
515
- | CASH.CASH | 49751.4 | 2020-06-28 | 49% |
516
- | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2% |
680
+
681
+ Investment
682
+
683
+ Cost
684
+
685
+ Investment date
686
+
687
+ Share
688
+
689
+ Artemis Fund Managers Limited
690
+
691
+ 23898
692
+
693
+ 2019-09-23
694
+
695
+ 24.8%
696
+
697
+ CASH.CASH
698
+
699
+ 49751.4
700
+
701
+ 2020-06-28
702
+
703
+ 49%
704
+
705
+ VODAFONE GRP
706
+
707
+ 26382.456
708
+
709
+ 2019-02-05
710
+
711
+ 26.2%
517
712
 
518
713
  Hide code
519
714
 
@@ -574,11 +769,38 @@ Columns can be aligned using the `align` property on the `TableColumn` object. C
574
769
  Currency and number formats are automatically right aligned to make the values easier to compare, but this can be overriden by setting the `align` property.
575
770
 
576
771
  My investments
577
- | Investment (left) | Cost (center) | Date (center) | Share (right) |
578
- | --- | --- | --- | --- |
579
- | Artemis Fund Managers Limited | $23,898.00 | 23/09/2019 | 24.8% |
580
- | CASH.CASH | $49,751.40 | 28/06/2020 | 49% |
581
- | VODAFONE GRP | $26,382.46 | 05/02/2019 | 26.2% |
772
+
773
+ Investment (left)
774
+
775
+ Cost (center)
776
+
777
+ Date (center)
778
+
779
+ Share (right)
780
+
781
+ Artemis Fund Managers Limited
782
+
783
+ $23,898.00
784
+
785
+ 23/09/2019
786
+
787
+ 24.8%
788
+
789
+ CASH.CASH
790
+
791
+ $49,751.40
792
+
793
+ 28/06/2020
794
+
795
+ 49%
796
+
797
+ VODAFONE GRP
798
+
799
+ $26,382.46
800
+
801
+ 05/02/2019
802
+
803
+ 26.2%
582
804
 
583
805
  Hide code
584
806
 
@@ -642,11 +864,38 @@ As a general rule we don't add vertical column borders to our tables. Sometimes
642
864
  To add a vertical divider you can set the `divider` prop in the `TableColumn` to true. This will add a vertical border to the end of the column.
643
865
 
644
866
  My investments
645
- | Investment | Date | Share | Cost |
646
- | --- | --- | --- | --- |
647
- | Artemis Fund Managers Limited | 23/09/2019 | 24.8% | $23,898.00 |
648
- | CASH.CASH | 28/06/2020 | 49% | $49,751.40 |
649
- | VODAFONE GRP | 05/02/2019 | 26.2% | $26,382.46 |
867
+
868
+ Investment
869
+
870
+ Date
871
+
872
+ Share
873
+
874
+ Cost
875
+
876
+ Artemis Fund Managers Limited
877
+
878
+ 23/09/2019
879
+
880
+ 24.8%
881
+
882
+ $23,898.00
883
+
884
+ CASH.CASH
885
+
886
+ 28/06/2020
887
+
888
+ 49%
889
+
890
+ $49,751.40
891
+
892
+ VODAFONE GRP
893
+
894
+ 05/02/2019
895
+
896
+ 26.2%
897
+
898
+ $26,382.46
650
899
 
651
900
  Hide code
652
901
 
@@ -705,11 +954,38 @@ Copy
705
954
  This can be enabled by setting the `hover` prop. This will bring attention to the row the user is hovering over, allowing users to focus on the relationship between the columns of a specific row.
706
955
 
707
956
  My investments
708
- | Investment Name | Cost | Investment Date | Total Percentage |
709
- | --- | --- | --- | --- |
710
- | Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
711
- | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
712
- | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
957
+
958
+ Investment Name
959
+
960
+ Cost
961
+
962
+ Investment Date
963
+
964
+ Total Percentage
965
+
966
+ Artemis Fund Managers Limited
967
+
968
+ 23898
969
+
970
+ 2019-09-23
971
+
972
+ 24.8
973
+
974
+ CASH.CASH
975
+
976
+ 49751.4
977
+
978
+ 2020-06-28
979
+
980
+ 49
981
+
982
+ VODAFONE GRP
983
+
984
+ 26382.456
985
+
986
+ 2019-02-05
987
+
988
+ 26.2
713
989
 
714
990
  Hide code
715
991
 
@@ -747,11 +1023,38 @@ Copy
747
1023
  `scope` defaults to row, which means the first cell in the row will be a `<th>`. When it is set to col the first cell in the row will be a `<td>`.
748
1024
 
749
1025
  My investments
750
- | Investment Name | Cost | Investment Date | Total Percentage |
751
- | --- | --- | --- | --- |
752
- | Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
753
- | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
754
- | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
1026
+
1027
+ Investment Name
1028
+
1029
+ Cost
1030
+
1031
+ Investment Date
1032
+
1033
+ Total Percentage
1034
+
1035
+ Artemis Fund Managers Limited
1036
+
1037
+ 23898
1038
+
1039
+ 2019-09-23
1040
+
1041
+ 24.8
1042
+
1043
+ CASH.CASH
1044
+
1045
+ 49751.4
1046
+
1047
+ 2020-06-28
1048
+
1049
+ 49
1050
+
1051
+ VODAFONE GRP
1052
+
1053
+ 26382.456
1054
+
1055
+ 2019-02-05
1056
+
1057
+ 26.2
755
1058
 
756
1059
  Hide code
757
1060
 
@@ -788,7 +1091,31 @@ Copy
788
1091
 
789
1092
  For very simple tabular data, you have the option to hide the table header with the `hiddenHeader` prop. When this is set to true, the table header will not be rendered.
790
1093
 
791
- <table class="ids-table-v5142 ids-table--hidden-header-v5142" id=":ru:"><caption id=":ru:--caption" class="">My investments</caption><tbody><tr id=":ru:--rows--0"><th data-column="investment_name" id=":ru:__0_investment_name" scope="row">Artemis Fund Managers Limited</th><td data-column="cost" headers=":ru:__0_investment_name" id=":ru:__0_cost">23898</td><td data-column="investmentDate" headers=":ru:__0_investment_name" id=":ru:__0_investmentDate">2019-09-23</td><td data-column="totalPercentage" headers=":ru:__0_investment_name" id=":ru:__0_totalPercentage">24.8</td></tr><tr id=":ru:--rows--1"><th data-column="investment_name" id=":ru:__1_investment_name" scope="row">CASH.CASH</th><td data-column="cost" headers=":ru:__1_investment_name" id=":ru:__1_cost">49751.4</td><td data-column="investmentDate" headers=":ru:__1_investment_name" id=":ru:__1_investmentDate">2020-06-28</td><td data-column="totalPercentage" headers=":ru:__1_investment_name" id=":ru:__1_totalPercentage">49</td></tr><tr id=":ru:--rows--2"><th data-column="investment_name" id=":ru:__2_investment_name" scope="row">VODAFONE GRP</th><td data-column="cost" headers=":ru:__2_investment_name" id=":ru:__2_cost">26382.456</td><td data-column="investmentDate" headers=":ru:__2_investment_name" id=":ru:__2_investmentDate">2019-02-05</td><td data-column="totalPercentage" headers=":ru:__2_investment_name" id=":ru:__2_totalPercentage">26.2</td></tr></tbody></table>
1094
+ My investments
1095
+
1096
+ Artemis Fund Managers Limited
1097
+
1098
+ 23898
1099
+
1100
+ 2019-09-23
1101
+
1102
+ 24.8
1103
+
1104
+ CASH.CASH
1105
+
1106
+ 49751.4
1107
+
1108
+ 2020-06-28
1109
+
1110
+ 49
1111
+
1112
+ VODAFONE GRP
1113
+
1114
+ 26382.456
1115
+
1116
+ 2019-02-05
1117
+
1118
+ 26.2
792
1119
 
793
1120
  Hide code
794
1121
 
@@ -828,11 +1155,38 @@ The `rows` prop allows you to use `ReactNodes` as the value of a cell. This can
828
1155
  **Note:** If you are using the `sort` property, the sorting may not work properly with rich content. If this happens, either remove the `sort` property or use the `format` prop on the column to set a custom formatter.
829
1156
 
830
1157
  My rich investments
831
- | Investment Name | Cost | Investment Date | Total Percentage |
832
- | --- | --- | --- | --- |
833
- | Artemis Fund Managers Limited | $23,898 | 2019/09/23 | 24.8% |
834
- | CASH.CASH | $49,751.40 | 2020/06/28 | 49% |
835
- | VODAFONE GRP | $26,382.46 | 2019/02/05 | 26.2% |
1158
+
1159
+ Investment Name
1160
+
1161
+ Cost
1162
+
1163
+ Investment Date
1164
+
1165
+ Total Percentage
1166
+
1167
+ Artemis Fund Managers Limited
1168
+
1169
+ $23,898
1170
+
1171
+ 2019/09/23
1172
+
1173
+ 24.8%
1174
+
1175
+ CASH.CASH
1176
+
1177
+ $49,751.40
1178
+
1179
+ 2020/06/28
1180
+
1181
+ 49%
1182
+
1183
+ VODAFONE GRP
1184
+
1185
+ $26,382.46
1186
+
1187
+ 2019/02/05
1188
+
1189
+ 26.2%
836
1190
 
837
1191
  Hide code
838
1192
 
@@ -870,9 +1224,15 @@ You can provide the table with some content to display when there is no row data
870
1224
 
871
1225
  This is reliant on `columns` prop to provide the information for the table header. If `columns` is not provided and there is no row data the table will not render.
872
1226
 
873
- | Investment | Date | Share | Cost |
874
- | --- | --- | --- | --- |
875
- | This table has no data |
1227
+ Investment
1228
+
1229
+ Date
1230
+
1231
+ Share
1232
+
1233
+ Cost
1234
+
1235
+ This table has no data
876
1236
 
877
1237
  Hide code
878
1238
 
@@ -917,11 +1277,38 @@ It accepts any of the table sub-elements. To ensure best display, please make us
917
1277
  **Note:** Only the `caption`, `hiddenCaption`, `hiddenHeader` and `hover` props are supported when using `children` to render a table.
918
1278
 
919
1279
  My investments
920
- | Investment | Cost | Investment date | Share |
921
- | --- | --- | --- | --- |
922
- | Artemis Fund Managers Limited | $23,898 | 2019/09/23 | 24.8% |
923
- | CASH.CASH | $49,751.40 | 2020/06/28 | 49% |
924
- | VODAFONE GRP | $26,382.46 | 2019/02/05 | 26.2% |
1280
+
1281
+ Investment
1282
+
1283
+ Cost
1284
+
1285
+ Investment date
1286
+
1287
+ Share
1288
+
1289
+ Artemis Fund Managers Limited
1290
+
1291
+ $23,898
1292
+
1293
+ 2019/09/23
1294
+
1295
+ 24.8%
1296
+
1297
+ CASH.CASH
1298
+
1299
+ $49,751.40
1300
+
1301
+ 2020/06/28
1302
+
1303
+ 49%
1304
+
1305
+ VODAFONE GRP
1306
+
1307
+ $26,382.46
1308
+
1309
+ 2019/02/05
1310
+
1311
+ 26.2%
925
1312
 
926
1313
  Hide code
927
1314
 
@@ -981,11 +1368,38 @@ Copy
981
1368
  You can customise the rows by passing in a `rowProps` object or function. It accepts a map of table row props that can be passed to a `tr` element, or a function that accepts the row data currently being rendered, and returns a map of table props.
982
1369
 
983
1370
  My investments
984
- | Investment Name | Cost | Investment Date | Total Percentage |
985
- | --- | --- | --- | --- |
986
- | Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
987
- | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
988
- | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
1371
+
1372
+ Investment Name
1373
+
1374
+ Cost
1375
+
1376
+ Investment Date
1377
+
1378
+ Total Percentage
1379
+
1380
+ Artemis Fund Managers Limited
1381
+
1382
+ 23898
1383
+
1384
+ 2019-09-23
1385
+
1386
+ 24.8
1387
+
1388
+ CASH.CASH
1389
+
1390
+ 49751.4
1391
+
1392
+ 2020-06-28
1393
+
1394
+ 49
1395
+
1396
+ VODAFONE GRP
1397
+
1398
+ 26382.456
1399
+
1400
+ 2019-02-05
1401
+
1402
+ 26.2
989
1403
 
990
1404
  Hide code
991
1405
 
@@ -1028,11 +1442,38 @@ Copy
1028
1442
  The `compact` prop can be used to reduce the padding around the table cells and reduce the font size. This can be useful when you have a lot of data to display and allow users to see as many columns as possible.
1029
1443
 
1030
1444
  My investments
1031
- | Investment Name | Cost | Investment Date | Total Percentage |
1032
- | --- | --- | --- | --- |
1033
- | Artemis Fund Managers Limited | 23898 | 2019-09-23 | 24.8 |
1034
- | CASH.CASH | 49751.4 | 2020-06-28 | 49 |
1035
- | VODAFONE GRP | 26382.456 | 2019-02-05 | 26.2 |
1445
+
1446
+ Investment Name
1447
+
1448
+ Cost
1449
+
1450
+ Investment Date
1451
+
1452
+ Total Percentage
1453
+
1454
+ Artemis Fund Managers Limited
1455
+
1456
+ 23898
1457
+
1458
+ 2019-09-23
1459
+
1460
+ 24.8
1461
+
1462
+ CASH.CASH
1463
+
1464
+ 49751.4
1465
+
1466
+ 2020-06-28
1467
+
1468
+ 49
1469
+
1470
+ VODAFONE GRP
1471
+
1472
+ 26382.456
1473
+
1474
+ 2019-02-05
1475
+
1476
+ 26.2
1036
1477
 
1037
1478
  Hide code
1038
1479
 
@@ -1070,7 +1511,45 @@ Copy
1070
1511
 
1071
1512
  In some cases you may have a table with multiple groups of rows inside it, however the columns are the same. For these cases, you can use the `IressTableBody` component.
1072
1513
 
1073
- <table class="ids-table-v5142" id=":rc:"><caption id=":rc:--caption" class="">My liabilities</caption><tbody aria-labelledby=":rd:--caption" class=""><tr><th aria-expanded="true" colspan="8" class="ids-table--row-group-header-v5142" id=":rd:--caption" scope="rowgroup" aria-controls=":rd:--header--0 :rd:--rows--0 :rd:--children"><button class="ids-table--activator-v5142" type="button">Current liabilities</button></th></tr><tr class="ids-table--row-group-column-headers-v5142" id=":rd:--header--0"><th id=":rd:__owner" headers=":rd:--caption" class="" style="width: 75px; min-width: 75px;">Owner</th><th id=":rd:__type" headers=":rd:--caption" class="" style="width: 100px; min-width: 100px;">Type</th><th id=":rd:__provider" headers=":rd:--caption" class="">Provider</th><th id=":rd:__status" headers=":rd:--caption" class="ids-table--divider-v5142">Status</th><th id=":rd:__frequency" headers=":rd:--caption" class="">Frequency</th><th id=":rd:__outstanding" headers=":rd:--caption" aria-sort="none" class="ids-table--cell--currency-v5142"><button type="button" class="ids-table--sort-button-v5142 ids-table--sort-button-no-wrap-v5142">Outstanding (GBP)<span role="img" class="ids-table--sort-icon-v5142 ids-icon-v5142 fa-sort fal" aria-label="sortable"></span></button></th><th id=":rd:__interestRate" headers=":rd:--caption" aria-sort="none" class="ids-table--cell--right-v5142"><button type="button" class="ids-table--sort-button-v5142 ids-table--sort-button-no-wrap-v5142">Interest rate p.a.<span role="img" class="ids-table--sort-icon-v5142 ids-icon-v5142 fa-sort fal" aria-label="sortable"></span></button></th><th id=":rd:__repayment" headers=":rd:--caption" aria-sort="none" class="ids-table--cell--currency-v5142"><button type="button" class="ids-table--sort-button-v5142 ids-table--sort-button-no-wrap-v5142">Repayment (GBP)<span role="img" class="ids-table--sort-icon-v5142 ids-icon-v5142 fa-sort fal" aria-label="sortable"></span></button></th></tr><tr id=":rd:--rows--0"><td data-column="owner" headers=":rd:__owner :rd:--caption" id=":rd:__0_owner" class="" style="width: 75px; min-width: 75px;">Client</td><td data-column="type" headers=":rd:__type :rd:--caption" id=":rd:__0_type" class="" style="width: 100px; min-width: 100px;">Credit card</td><td data-column="provider" headers=":rd:__provider :rd:--caption" id=":rd:__0_provider" class=""></td><td data-column="status" headers=":rd:__status :rd:--caption" id=":rd:__0_status" class="ids-table--divider-v5142">Current</td><td data-column="frequency" headers=":rd:__frequency :rd:--caption" id=":rd:__0_frequency" class="">Monthly</td><td data-column="outstanding" headers=":rd:__outstanding :rd:--caption" id=":rd:__0_outstanding" class="ids-table--cell--currency-v5142">5,000.00</td><td data-column="interestRate" headers=":rd:__interestRate :rd:--caption" id=":rd:__0_interestRate" class="ids-table--cell--right-v5142">0%</td><td data-column="repayment" headers=":rd:__repayment :rd:--caption" id=":rd:__0_repayment" class="ids-table--cell--currency-v5142">300.00</td></tr><tr id=":rd:--children"><td colspan="8"><button class="iress-form-element iress-form-element__inner iress-u-button iress--mode--tertiary" type="button"><span class="iress-u-button__prepend"><span role="img" class="ids-icon-v5142 fa-plus-circle fal" aria-hidden="true"></span></span>Add current liability</button></td></tr></tbody><tbody aria-labelledby=":rf:--caption" class=""><tr><th aria-expanded="false" colspan="8" class="ids-table--row-group-header-v5142" id=":rf:--caption" scope="rowgroup"><button class="ids-table--activator-v5142" type="button">Long term liabilities</button></th></tr></tbody><tbody aria-labelledby=":rg:--caption" class=""><tr><th aria-expanded="false" colspan="8" class="ids-table--row-group-header-v5142" id=":rg:--caption" scope="rowgroup"><button class="ids-table--activator-v5142" type="button">Contingent liabilities</button></th></tr></tbody></table>
1514
+ My liabilities
1515
+
1516
+ Current liabilities
1517
+
1518
+ Owner
1519
+
1520
+ Type
1521
+
1522
+ Provider
1523
+
1524
+ Status
1525
+
1526
+ Frequency
1527
+
1528
+ Outstanding (GBP)
1529
+
1530
+ Interest rate p.a.
1531
+
1532
+ Repayment (GBP)
1533
+
1534
+ Client
1535
+
1536
+ Credit card
1537
+
1538
+ Current
1539
+
1540
+ Monthly
1541
+
1542
+ 5,000.00
1543
+
1544
+ 0%
1545
+
1546
+ 300.00
1547
+
1548
+ Add current liability
1549
+
1550
+ Long term liabilities
1551
+
1552
+ Contingent liabilities
1074
1553
 
1075
1554
  Hide code
1076
1555
 
@@ -1227,16 +1706,42 @@ Copy
1227
1706
  It has been exposed so you can use it in your own components to format values in the same way as the table component.
1228
1707
 
1229
1708
  IressTableFormattedValue
1230
- | Mode | Example |
1231
- | --- | --- |
1232
- | string | string |
1233
- | number | 10000 |
1234
- | date | 25/06/2025 |
1235
- | shortDate | 25 Jun 2025 |
1236
- | isoDateTime | 2025-06-25 00:12:43 (UTC) |
1237
- | relativeTime | now |
1238
- | currency | $10,000.00 |
1239
- | percent | 50% |
1709
+
1710
+ Mode
1711
+
1712
+ Example
1713
+
1714
+ string
1715
+
1716
+ string
1717
+
1718
+ number
1719
+
1720
+ 10000
1721
+
1722
+ date
1723
+
1724
+ 15/05/2025
1725
+
1726
+ shortDate
1727
+
1728
+ 15 May 2025
1729
+
1730
+ isoDateTime
1731
+
1732
+ 2025-05-15 12:41:29 (AEST)
1733
+
1734
+ relativeTime
1735
+
1736
+ now
1737
+
1738
+ currency
1739
+
1740
+ $10,000.00
1741
+
1742
+ percent
1743
+
1744
+ 50%
1240
1745
 
1241
1746
  Hide code
1242
1747