Nie możesz wybrać więcej, niż 25 tematów Tematy muszą się zaczynać od litery lub cyfry, mogą zawierać myślniki ('-') i mogą mieć do 35 znaków.

configuration.md 4.8 KiB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226
  1. ---
  2. sidebarDepth: 2
  3. ---
  4. # Configuration
  5. With all the customizable features of Frappe Charts, this section is dedicated to enabling / disabling existing functionality.
  6. ## Container
  7. The first parameter required by the `DataTable` constructor is the container element. You can pass in a CSS Selector or a DOM Object.
  8. ```javascript
  9. const datatable = new DataTable('#datatable', options);
  10. // or
  11. const container = document.querySelector('#datatable');
  12. const datatable = new DataTable(container, options);
  13. ```
  14. ## Options
  15. The second parameter required by the `DataTable` constructor is the options object. The minimum required configuration is to pass `column` and `data` values.
  16. ```javascript
  17. const options = {
  18. columns: ['Name', 'Position', 'Salary'],
  19. data: [
  20. ['John Doe', 'DevOps Engineer', '$12300'],
  21. ['Mary Jane', 'UX Design', '$14000'],
  22. ]
  23. }
  24. const datatable = new DataTable(container, options);
  25. ```
  26. The following options are configurable:
  27. ### getEditor
  28. - Type: `Function`
  29. - Default: `null`
  30. Customize the editor behaviour.
  31. ---
  32. ### serialNoColumn
  33. - Type: `Boolean`
  34. - Default: `true`
  35. Whether to show serial number as the first column in datatable.
  36. ---
  37. ### checkboxColumn
  38. - Type: `Boolean`
  39. - Default: `false`
  40. Whether to show checkbox column in the datatable.
  41. ---
  42. ### clusterize
  43. - Type: `Boolean`
  44. - Default: `true`
  45. Whether to use clusterize to render the data.
  46. > If you don't want to show large number of rows. Then you can turn this off. In that case you don't need to load the `clusterize.js` lib
  47. ---
  48. ### layout
  49. - Type: `String`
  50. - Default: `fixed`
  51. - Options: `fixed | fluid | ratio`
  52. This option controls how width of each `column` is calculated in the DataTable.
  53. #### fixed
  54. The column width is calculated based on the content of the first row of the table. This layout can result in horizontal scroll.
  55. #### fluid
  56. The column width is adjusted based on the width of container. So the columns will be resized if the window is resized. This layout won't result in horizontal scroll. You will always see all the columns.
  57. #### ratio
  58. This layout works similar to the `flex` property in CSS. When column A has `width` set as `1` and column B as `2`, then column B's width will be twice as much as column A.
  59. ---
  60. ### noDataMessage
  61. - Type: `String`
  62. - Default: `No Data`
  63. The message shown when there are no rows to show in the DataTable.
  64. ---
  65. ### dynamicRowHeight
  66. - Type: `Boolean`
  67. - Default: `false`
  68. The height of the row will be set according to the content of the cell with the maximum height in that row.
  69. ---
  70. ### cellHeight
  71. - Type: `Number`
  72. - Default: `null`
  73. Set the height of each cell explicitly.
  74. > If this value is set, `dynamicRowHeight` won't have any effect.
  75. ---
  76. ### inlineFilters
  77. - Type: `Boolean`
  78. - Default: `false`
  79. Whether to enable the inline filter feature. If the value is `true`, then you can activate the filter row by pressing `Ctrl/Cmd + F` after clicking on any cell in the DataTable.
  80. ---
  81. ### treeView
  82. - Type: `Boolean`
  83. - Default: `false`
  84. Whether to render rows in a tree structure. For this to work, you must pass the `indent` value for each row.
  85. Example
  86. ```javascript
  87. const data = [
  88. {
  89. 'Department': 'IT Department',
  90. 'No of People': '10',
  91. 'indent': 0,
  92. },
  93. {
  94. 'Department': 'Javascript Team',
  95. 'No of People': '5',
  96. 'indent': 1,
  97. },
  98. {
  99. 'Department': 'Vue.js Team',
  100. 'No of People': '3',
  101. 'indent': 2,
  102. },
  103. {
  104. 'Department': 'React Team',
  105. 'No of People': '2',
  106. 'indent': 2,
  107. },
  108. {
  109. 'Department': 'Design Team',
  110. 'No of People': '5',
  111. 'indent': 1,
  112. },
  113. ]
  114. const datatable = new DataTable('#datatable', {
  115. columns: ['Department', 'No of People'],
  116. data: data
  117. });
  118. ```
  119. ---
  120. ### checkedRowStatus
  121. - Type: `Boolean`
  122. - Default: `true`
  123. Whether to show the number of rows checked in a toast message.
  124. ---
  125. ### pasteFromClipboard
  126. - _Experimental_
  127. - Type: `Boolean`
  128. - Default: `false`
  129. Whether to allow the user to paste copied content into selected cell(s).
  130. ---
  131. ### dropdownButton
  132. - Type: `String`
  133. - Default: `▼`
  134. String to render as the dropdown button. You can pass a span with an icon class.
  135. Example
  136. ```javascript
  137. {
  138. dropdownButton: '<span class="fa fa-chevron-down"></span>'
  139. }
  140. ```
  141. ### headerDropdown
  142. - Type: `Array`
  143. When you hover over any column, you see the dropdown button which is used to perform certain actions for that column.
  144. This options allows you to pass an array of custom buttons with custom actions defined by you.
  145. ```javascript
  146. options = {
  147. headerDropdown: [
  148. {
  149. label: 'Copy column contents',
  150. action: function (column) {
  151. // code to copy the column contents
  152. }
  153. },
  154. }
  155. ```
  156. ### events
  157. - Type: `Object`
  158. The events options is described in detailed in the [next section](events.md).