├── .github └── workflows │ └── build.yml ├── .gitignore ├── .prettierignore ├── .prettierrc ├── CHANGELOG.md ├── LICENSE ├── README.md ├── dist ├── cjs │ ├── SvelteTable.js │ └── SvelteTable.js.map ├── es │ ├── SvelteTable.mjs │ └── SvelteTable.mjs.map ├── iife │ ├── SvelteTable.js │ └── SvelteTable.js.map └── umd │ ├── SvelteTable.js │ └── SvelteTable.js.map ├── docs ├── SvelteTableIIFE.js ├── bundle.css ├── global.css └── index.html ├── example ├── .gitignore ├── Example1.svelte ├── Example2.svelte ├── Example3.svelte ├── Example4.svelte ├── Example5.svelte ├── Example6.svelte ├── Example7.svelte ├── Example8.svelte ├── README.md ├── example1.js ├── example2.js ├── example3.js ├── example4.js ├── example5.js ├── example6.js ├── example6 │ ├── ContactButtonComponent.svelte │ └── HelpButtonComponent.svelte ├── example7.ts ├── example8.ts ├── helper.js ├── public │ ├── example1.html │ ├── example2.html │ ├── example3.html │ ├── example4.html │ ├── example5.html │ ├── example6.html │ ├── example7.html │ ├── global.css │ ├── iife_example.html │ └── index.html └── rollup.config.js ├── package-lock.json ├── package.json ├── rollup.config.js └── src ├── SvelteTable.svelte ├── index.js ├── svelte.d.ts └── types.d.ts /.github/workflows/build.yml: -------------------------------------------------------------------------------- 1 | name: Build 2 | 3 | on: 4 | pull_request 5 | 6 | jobs: 7 | build: 8 | runs-on: ubuntu-22.04 9 | 10 | steps: 11 | - uses: actions/checkout@v4 12 | 13 | - uses: actions/setup-node@v4 14 | with: 15 | node-version: '20.x' 16 | 17 | - name: Install dependencies 18 | run: npm ci 19 | 20 | - name: Build 21 | run: npm run build 22 | 23 | - name: Lint 24 | run: npm run lint 25 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | .vscode/ 5 | npm-debug.log* 6 | yarn-debug.log* 7 | yarn-error.log* 8 | node_modules/ 9 | */node_modules/ 10 | package-lock.json 11 | public/ -------------------------------------------------------------------------------- /.prettierignore: -------------------------------------------------------------------------------- 1 | node_modules/** 2 | dist/ 3 | docs/ 4 | .github/ 5 | public/ 6 | package-lock.json 7 | package.json -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "trailingComma": "es5", 3 | "tabWidth": 2, 4 | "semi": true, 5 | "singleQuote": false, 6 | "endOfLine": "lf", 7 | "arrowParens": "avoid" 8 | } 9 | -------------------------------------------------------------------------------- /CHANGELOG.md: -------------------------------------------------------------------------------- 1 | ## 0.6.4 2 | 3 | - [#174], [#38] Allow passing a 2 parameter function to filterValue to allow more advanced filter functionality 4 | 5 | ## 0.6.3 6 | 7 | - [#168] fix for [#166] that's breaking sveltekit types 8 | 9 | ## 0.6.2 10 | 11 | - [#166] Add export for vite-plugin-svelte@3 ([x64v](https://github.com/conveyinc/svelte-table/commits?author=x64v)) 12 | 13 | ## 0.6.1 14 | 15 | - [#160] `parseHTML` type definition is optional 16 | 17 | ## 0.6.0 18 | 19 | - [#158] braking change: requires `parseHTML` to be set to render the cell value with `@html` 20 | 21 | ## 0.5.11 22 | 23 | - [#153] fix types (`sortBy`, `filterSelections`, `expanded`, `selected`) 24 | - [#154] Add `rowIndex` and `colIndex` to `value` and `renderValue` functions 25 | 26 | ## 0.5.10 27 | 28 | - [#149] fix `searchValue` type 29 | 30 | ## 0.5.9 31 | 32 | - [#144] `filterPlaceholder` works on select dropdowns too 33 | 34 | ## 0.5.8 35 | 36 | - [#143] improvements to typescript integration 37 | 38 | ## 0.5.7 39 | 40 | - [#139] fix bug when a column is removed 41 | - [#139] fix bug in Example3 42 | - set expand cursor to the span instead of the cell 43 | 44 | ## 0.5.6 45 | 46 | - [#134] add `filterPlaceholder` option to column 47 | - [#132] fix error `A11y: Non-interactive element cannot have interactive role 'button'` 48 | - bump svelte to `3.57.0` 49 | 50 | ## 0.5.5 51 | 52 | - [#128] Add ability to hide search 53 | 54 | ## 0.5.4 55 | 56 | - [#123] fix filter bug introduced in v0.5.3 57 | 58 | ## 0.5.3 59 | 60 | - [#120] add support for user-defined search function with `searchValue` 61 | 62 | ## 0.5.2 63 | 64 | - [#112] a11y imporovements: add `on:keypress` listeners and `tabindex="0"` to interactive elements 65 | 66 | ## 0.5.1 67 | 68 | - [#107] types: value optional 69 | - [ST-103] Added lint check in actions 70 | - [#101] Fix typo and print "is needed" message as error 71 | 72 | ## 0.5.0 73 | 74 | - Droped typescript usage. Causing issues, especially with use in REPL 75 | 76 | ## 0.4.5 77 | 78 | - Fix package.json (v0.4.0 bugfix) 79 | - `classNameRow` prop and column `class` support passing functions to resolve by using column data or index 80 | - Row selection support 81 | - TypeScript support 82 | 83 | ## 0.3.5 84 | 85 | - bump svelte from 3.39.0 to 3.49.0 86 | - update package-lock 87 | 88 | ## 0.3.4 89 | 90 | - Add `classNameInput` prop and a `headerFilterClass` column object key [#76](https://github.com/dasDaniel/svelte-table/issues/76) 91 | 92 | ## 0.3.3 93 | 94 | - Customize sort order using `sortOrders` prop [#73](https://github.com/dasDaniel/svelte-table/issues/73) 95 | 96 | ## 0.3.2 97 | 98 | - set svelte version to 3.39.0 and recompiled to address [sveltejs/svelte#6584](https://github.com/sveltejs/svelte/issues/6584) 99 | - `c_rows` internal exposed (the name may change in future) 100 | 101 | ## 0.3.1 102 | 103 | - `iconAsc`, `iconDesc`, `iconExpand`, `iconExpanded` now support html content 104 | 105 | ## 0.3.0 106 | 107 | ### Breaking Change 108 | 109 | class name `classNameRowExpanded` now refers to the **row, not the content** 110 | 111 | - added `classNameExpandedContent` for targetting the expanded content 112 | - set `classNameRowExpanded` to target the row being expanded 113 | - did more cleanup on examples 114 | 115 | ## 0.2.0 116 | 117 | - New feature: added ability to expand rows 118 | 119 | ## 0.1.19 120 | 121 | - Only sort columns if column is sortable [#43](https://github.com/dasDaniel/svelte-table/pull/43) 122 | - cleanup repo [#44](https://github.com/dasDaniel/svelte-table/pull/44) 123 | 124 | ## 0.1.18 125 | 126 | - Handle dynamic column definition 127 | 128 | ## 0.1.17 129 | 130 | - `filterSelections` allows setting/getting search and filter selection values 131 | - bugfix: no longer missing haeders when only search is provided (only worked for filters) 132 | - examples: faker dependency is now a global referenced via cdn for faster bundling 133 | 134 | ## 0.1.16 135 | 136 | - support passing props to renderComponent 137 | 138 | ## 0.1.15 139 | 140 | - added ability to render Svelte component as content via `col.renderComponent` 141 | - some cleanup on rollup config 142 | - updated readme 143 | 144 | ## 0.1.14 145 | 146 | - added search support 147 | 148 | ## 0.1.12 149 | 150 | - disabled click handler for header on columns that are not sortable 151 | - fix examples to use correct case 152 | 153 | ## 0.1.11 154 | 155 | - updated dependency versions 156 | - cleanup 157 | 158 | ## 0.1.10 159 | 160 | - filters now update when rows change 161 | - added example4 to illustrate reactive filters 162 | 163 | ## 0.1.9 164 | 165 | - updated dependencies 166 | - pass click event for `clickCol`, `clickRow`, and `clickCell` listeners 167 | - improved examples 168 | - improved code formatting 169 | 170 | ## 0.1.8 171 | 172 | - fixed asStringArray function 173 | - removed package-lock to reduce potential security issues with some old nested dependencies 174 | 175 | ## 0.1.7 176 | 177 | - added support for class names for table, thead, tbody, select, row, and cell elements 178 | - cleaned up tab use in code 179 | 180 | ## 0.1.6 181 | 182 | - readme update 183 | - filterable column defaults to value if filerValue not provided 184 | - filterOptions now accepts array of values 185 | 186 | ## 0.1.5 187 | 188 | - update dependencies 189 | - removed unused onDestroy 190 | 191 | ## 0.1.4 192 | 193 | - updated readme and example 194 | - added header and row slots 195 | - made more props available externally 196 | - added ability to listen to click events for headers, row, or cell 197 | 198 | ## 0.1.3 199 | 200 | - switched dependencies to devDependencies 201 | - README fixes 202 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2019 Daniel Poda 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of 6 | this software and associated documentation files (the "Software"), to deal in 7 | the Software without restriction, including without limitation the rights to 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of 9 | the Software, and to permit persons to whom the Software is furnished to do so, 10 | subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS 17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR 18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER 19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN 20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # svelte-table 2 | 3 | A _relatively_ minimal table component. Allows sorting and filtering based on column values, and row selection/expanding. 4 | 5 | ## Example 6 | 7 | [github pages IIFE example](https://dasdaniel.github.io/svelte-table/) 8 | 9 | ## Install 10 | 11 | ```sh 12 | npm install -save svelte-table 13 | ``` 14 | 15 | ## Usage 16 | 17 | The package includes exports for raw svelte, ES Module(.mjs) and CJS (.js) exports. Your bundler will likely know which one to pick by using `import SvelteTable from "svelte-table"` 18 | 19 | ```html 20 | 29 | 30 | 31 | ``` 32 | 33 | An iife version is also available in the `/dist/iife` folder. This allows for easy run-time use, such as a direct uncompiled dependency for a use outside of a svelte project. 34 | 35 | ```html 36 | 37 |
38 | 50 | ``` 51 | 52 | ## Sample Data and config 53 | 54 | ```js 55 | // define some sample data... 56 | const rows = [ 57 | { id: 1, first_name: "Marilyn", last_name: "Monroe", pet: "dog" }, 58 | { id: 2, first_name: "Abraham", last_name: "Lincoln", pet: "dog" }, 59 | { id: 3, first_name: "Mother", last_name: "Teresa", pet: "" }, 60 | { id: 4, first_name: "John F.", last_name: "Kennedy", pet: "dog" }, 61 | { id: 5, first_name: "Martin Luther", last_name: "King", pet: "dog" }, 62 | { id: 6, first_name: "Nelson", last_name: "Mandela", pet: "cat" }, 63 | { id: 7, first_name: "Winston", last_name: "Churchill", pet: "cat" }, 64 | { id: 8, first_name: "George", last_name: "Soros", pet: "bird" }, 65 | { id: 9, first_name: "Bill", last_name: "Gates", pet: "cat" }, 66 | { id: 10, first_name: "Muhammad", last_name: "Ali", pet: "dog" }, 67 | { id: 11, first_name: "Mahatma", last_name: "Gandhi", pet: "bird" }, 68 | { id: 12, first_name: "Margaret", last_name: "Thatcher", pet: "cat" }, 69 | { id: 13, first_name: "Christopher", last_name: "Columbus", pet: "dog" }, 70 | { id: 14, first_name: "Charles", last_name: "Darwin", pet: "dog" }, 71 | { id: 15, first_name: "Elvis", last_name: "Presley", pet: "dog" }, 72 | { id: 16, first_name: "Albert", last_name: "Einstein", pet: "dog" }, 73 | { id: 17, first_name: "Paul", last_name: "McCartney", pet: "cat" }, 74 | { id: 18, first_name: "Queen", last_name: "Victoria", pet: "dog" }, 75 | { id: 19, first_name: "Pope", last_name: "Francis", pet: "cat" }, 76 | // etc... 77 | ]; 78 | 79 | // define column configs 80 | const columns = [ 81 | { 82 | key: "id", 83 | title: "ID", 84 | value: v => v.id, 85 | sortable: true, 86 | filterOptions: rows => { 87 | // generate groupings of 0-10, 10-20 etc... 88 | let nums = {}; 89 | rows.forEach(row => { 90 | let num = Math.floor(row.id / 10); 91 | if (nums[num] === undefined) 92 | nums[num] = { name: `${num * 10} to ${(num + 1) * 10}`, value: num }; 93 | }); 94 | // fix order 95 | nums = Object.entries(nums) 96 | .sort() 97 | .reduce((o, [k, v]) => ((o[k] = v), o), {}); 98 | return Object.values(nums); 99 | }, 100 | filterValue: (r, f) => f === Math.floor(r.id / 10), 101 | headerClass: "text-left", 102 | }, 103 | { 104 | key: "first_name", 105 | title: "FIRST_NAME", 106 | value: v => v.first_name, 107 | sortable: true, 108 | filterOptions: rows => { 109 | // use first letter of first_name to generate filter 110 | let letrs = {}; 111 | rows.forEach(row => { 112 | let letr = row.first_name.charAt(0); 113 | if (letrs[letr] === undefined) 114 | letrs[letr] = { 115 | name: `${letr.toUpperCase()}`, 116 | value: letr.toLowerCase(), 117 | }; 118 | }); 119 | // fix order 120 | letrs = Object.entries(letrs) 121 | .sort() 122 | .reduce((o, [k, v]) => ((o[k] = v), o), {}); 123 | return Object.values(letrs); 124 | }, 125 | filterValue: (r, f) => f === r.first_name.charAt(0).toLowerCase(), 126 | }, 127 | { 128 | key: "last_name", 129 | title: "LAST_NAME", 130 | value: v => v.last_name, 131 | sortable: true, 132 | filterOptions: rows => { 133 | // use first letter of last_name to generate filter 134 | let letrs = {}; 135 | rows.forEach(row => { 136 | let letr = row.last_name.charAt(0); 137 | if (letrs[letr] === undefined) 138 | letrs[letr] = { 139 | name: `${letr.toUpperCase()}`, 140 | value: letr.toLowerCase(), 141 | }; 142 | }); 143 | // fix order 144 | letrs = Object.entries(letrs) 145 | .sort() 146 | .reduce((o, [k, v]) => ((o[k] = v), o), {}); 147 | return Object.values(letrs); 148 | }, 149 | filterValue: (r, f) => f === r.last_name.charAt(0).toLowerCase(), 150 | }, 151 | { 152 | key: "pet", 153 | title: "Pet", 154 | value: v => v.pet, 155 | renderValue: v => v.pet.charAt(0).toUpperCase() + v.pet.substring(1), // capitalize 156 | sortable: true, 157 | filterOptions: ["bird", "cat", "dog"], // provide array 158 | }, 159 | ]; 160 | ``` 161 | 162 | ## Props 163 | 164 | | Option | Type | Description | 165 | | -------------------------- | --------------- | ----------------------------------------------------------------------- | 166 | | `columns` | Object[] | column config (details below) | 167 | | `rows` | Object[] | row (data) array | 168 | | `sortBy` | String | ‡ Sorting key | 169 | | `sortOrder` | Number | ‡ `1` = Ascending, `-1` Descending, `0` no filtering | 170 | | `sortOrders` | Number[] | availability of order options | 171 | | `iconAsc` | String | (_html_) override ascending order indication | 172 | | `iconDesc` | String | (_html_) override descending order indication | 173 | | `iconFilterable` | String | (_html_) override filterable column indication | 174 | | `iconExpand` | String | row collapsed indicator/button | 175 | | `iconExpanded` | String | row expanded indicator/button | 176 | | `iconSortable` | String | indicate column is sortable | 177 | | `classNameTable` | String/Array | _optional_ class name(s) for table element | 178 | | `classNameThead` | String/Array | _optional_ class name(s) for thead element | 179 | | `classNameTbody` | String/Array | _optional_ class name(s) for tbody element | 180 | | `classNameSelect` | String/Array | _optional_ class name(s) for filter select elements | 181 | | `classNameInput` | String/Array | _optional_ class name(s) for search input elements | 182 | | `classNameRow` | String/function | _optional_ class name(s) for row elements. Supports passing function | 183 | | `classNameRowExpanded` | String/Array | _optional_ class name(s) for expanded row | 184 | | `classNameExpandedContent` | String/Array | _optional_ class name(s) for expanded row content | 185 | | `classNameRowSelected` | String/Array | _optional_ class name(s) for selected row | 186 | | `classNameCell` | String/Array | _optional_ class name(s) for cell elements | 187 | | `classNameCellExpand` | String/Array | _optional_ class name(s) for cell with expand icon | 188 | | `expanded` | String[] | ‡ _optional_ array of key values of expanded rows | 189 | | `expandRowKey` | String | _optional_ **deprecated** use `rowKey` | 190 | | `rowKey` | String | _optional_ key for expanded or selected row (use unique values like id) | 191 | | `expandSingle` | Boolean | _optional_ default: `false` allow only one row to be selected | 192 | | `selected` | String[] | ‡ _optional_ array of key values of selected rows | 193 | | `selectSingle` | Boolean | _optional_ default: `false` allow only one row to be selected | 194 | | `selectOnClick` | Boolean | _optional_ default: `false` will clicking on row will update selection | 195 | | `filterSelections` | Object[] | ‡ _optional_ search or filter selection | 196 | | `showExpandIcon` | Boolean | should a expand column be visible | 197 | 198 | _‡_ field allows 2-way binding 199 | 200 | ### Events 201 | 202 | Events pass a CustomEvent object with the following params in the `detail` object 203 | 204 | | event | detail parameters | Description | 205 | | ------------- | --------------------- | --------------- | 206 | | `clickCol` | `event`, `col`, `key` | click on column | 207 | | `clickRow` | `event`, `row` | click on a row | 208 | | `clickCell` | `event`, `row`, `key` | click on a cell | 209 | | `clickExpand` | `event`, `row` | click expand | 210 | 211 | ### Expanding Rows 212 | 213 | - Row expanding is tracked using the `expanded` property. (supports 2-way binding) 214 | - The keys are defined using the `rowKey` property (previously `expandRowKey` which is getting deprecated). It is recommended to use a key that is unique to each row like a dedicated id or key field, to prevent conflict. 215 | - The content for the field is passed through the `expanded` slot. 216 | - The expanding can be managed manually or by using the built-in column using `showExpandIcon` property 217 | - Expand events can be listened to using `on:clickExpand` which will include the `row` object in the `event.detail` object. 218 | - `expandSingle` can be set to true to only allow a single column open at a time 219 | - `expandSingle` does not inforce single row expansion when multiple keys are is passed to `expanded` 220 | - Row expanded status is available through the `$expanded` property of the row, but is consdered an internal and may be removed 221 | 222 | Example: 223 | 224 | ```html 225 |
226 | 233 | {row.detail} 234 | 235 |
236 | ``` 237 | 238 | ### Selecting Rows 239 | 240 | - By default, selection functionality is disabled, enable through `selectOnClick` 241 | - Row selection is tracked by `selection` property and supports 2-way binding 242 | - Selection happens when user clicks on row 243 | - Use `classNameRowSelected` to assign class to a selected row 244 | - Selection is tracked using the key defined by the `rowKey` property 245 | - The selection prop is an array because it supports both single and multiple selections 246 | - Multiple vs. single selection is handled through `selectSingle` 247 | - `selectSingle` does not enforce single row selection when multiple keys are is passed to `selection` 248 | - Row selection status is available through the `$selected` property of the row, but is considered an internal and may be removed 249 | 250 | ### Filtering order 251 | 252 | Providing `sortOrders` specifies the column filtering orders. `sortOrders = [1, -1, 0]` indicates that the row will be sorted ascending (`1`), then descending (`-1`), then going back without any filter (`0`), 253 | 254 | ### `filterSelections` 255 | 256 | Allows getting and setting the search or filter value. The `filterSelections` will update as the filter and search selection changes. 257 | Inside the object keys (matching row keys) will be used to get/set the filter and search values. Setting key to `undefined` or deleting 258 | it will remove filter or search setting. 259 | 260 | example: (will preset column with key `first_name` to `a`) 261 | 262 | ```html 263 | 266 | 271 | ``` 272 | 273 | ## Column array object values 274 | 275 | | Option | Type | Description | 276 | | --------------------- | -------------- | ------------------------------------------------------------------------------------------------------ | 277 | | `key` | String | Unique key identifying the column | 278 | | `title` | String | Title for header | 279 | | `value` | Function | table cell value. The function is passed row data | 280 | | `[class]` | String | _optional_ table cell class name | 281 | | `[sortable]` | Boolean | _optional_ Whether the table can be sorted on column | 282 | | `[searchValue]` | Function | _optional_ search value function. function is passed row data and serach term | 283 | | `[filterOptions]` | Array/Function | _optional_ array of objects with `name` and `value`. Function is passed an array of rows | 284 | | `[filterValue]` | Function | _optional_ filter value function, 1 or 2 parameter function | 285 | | `[filterPlaceholder]` | String | _optional_ placeholder attribute for the filter input or select dropdown | 286 | | `[hideFilterHeader]` | Boolean | _optional_ will hide search or filter input in header | 287 | | `[headerClass]` | String | _optional_ class to assign to header element | 288 | | `[headerFilterClass]` | String | _optional_ class to assign to search/filter header element | 289 | | `[renderValue]` | Function | _optional_ render function for rendering html content | 290 | | `[renderComponent]` | Component | _optional_ pass a Svelte component, it will receive `row` and `col` variables (replaces `renderValue`) | 291 | | `[parseHTML]` | Boolean | _optional_ if true, it will render the cell value with `@html` | 292 | 293 | ### `searchValue` 294 | 295 | #### Option 1: `searchValue(row, searchTerm):boolean` 296 | 297 | Define a function that accepts a row and the searchTerm, the comparison is defined within the function and the match is returned in the form of a boolean. 298 | 299 | This is the recommended way of using the search (added in v0.5.3) 300 | 301 | #### Option 2: `searchValue(row):string` 302 | 303 | Define a function that accepts a row and returns a string. SveltTable does the comparison internally, but only supports case-insensitive compare using `includes` 304 | 305 | This behaviour is set for deprecation and should not be used. 306 | 307 | If you want to migrate the existing behaviour you can use this example: 308 | 309 | ```js 310 | searchValue: (v, s) => 311 | v["some_key"].toString().toLowerCase().includes(s.toLowerCase()), 312 | ``` 313 | 314 | ### `filterValue` 315 | 316 | #### Option 1: `(row, filterSelection)=>boolean` 317 | 318 | By passing a 2 parameter function, the function can be used to define filter functionality. This allows filtering using things like `includes` on an array. 319 | Instead of defining a set of preset filter functionalities, this allows more control 320 | 321 | #### Option 2: `(row)=>string` 322 | 323 | This feature is set for deprication in favor of Option #1. 324 | 325 | By passing a 1 parameter function, the table will filter based on the returned string matching the filter selection. 326 | 327 | Also note that the functionality matches the passed `value` function, which it defaults to when not defined. There is an option to define both in case the value and filter value needs to be different. 328 | 329 | ### `renderComponent` 330 | 331 | Defining a component can be done directly by passing the component as a value 332 | 333 | ```js 334 | [ 335 | { 336 | key: "myColumn", 337 | //... 338 | renderComponent: myComponent, 339 | }, 340 | ]; 341 | ``` 342 | 343 | Or, if props need to be passed, an object with `component` and `props` can be passed. 344 | 345 | ```js 346 | [ 347 | { 348 | key: "myColumn", 349 | //... 350 | renderComponent: { 351 | component: myComponent, 352 | props: { 353 | myProp: "someValue", 354 | }, 355 | }, 356 | }, 357 | ]; 358 | ``` 359 | 360 | ## Slots 361 | 362 | | Option | Description | 363 | | ---------- | ---------------------------------------------------------------------------------------------- | 364 | | `header` | slot for rendering the `tr` and `th` content. This will replace `title` in the header | 365 | | `row` | slot for rendering the `tr` and `td` content. This will replace the rendering of `renderValue` | 366 | | `expanded` | slot for rendering the content of the expanded row | 367 | 368 | --- 369 | 370 | ### Conditional row and cell class names 371 | 372 | By passing a function to `classNameRow` the rows can have class assigned for the tr element based on the row value. 373 | The function is provided two arguments, the row value, and the row index. 374 | 375 | ```js 376 | // classNameRow function type definition 377 | (row: Row, rowIndex?: number) => string | null; 378 | ``` 379 | 380 | This is an example of using the row index make a striped table, which may be needed when rows are expandable. 381 | 382 | ```js 383 | (row, rowIndex) => (rowIndex % 2 == 0 ? null : "row-odd"); 384 | ``` 385 | 386 | Individual cells can also be formatted by passing a function to the `class` prop in the column object. 387 | The class function is provided three parameters. In addition to the row and rowIndex, it also provides the column index 388 | 389 | ```js 390 | // classs function type definition 391 | (row: Row, rowIndex?: number, colIndex?: number) => string | null; 392 | ``` 393 | 394 | example for a checker-board pattern: 395 | 396 | ```js 397 | (row, rowIndex, colIndex) => 398 | (rowIndex + colIndex) % 2 == 0 ? null : "cell-odd"; 399 | ``` 400 | 401 | example using a value from the row object: 402 | 403 | ```js 404 | row => row.count > 10 && "cell-valid"; 405 | ``` 406 | -------------------------------------------------------------------------------- /dist/cjs/SvelteTable.js: -------------------------------------------------------------------------------- 1 | "use strict";function e(){}function t(e,t){for(const n in t)e[n]=t[n];return e}function n(e){return e()}function l(){return Object.create(null)}function o(e){e.forEach(n)}function s(e){return"function"==typeof e}function r(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function c(e,t,n,l){if(e){const o=a(e,t,n,l);return e[0](o)}}function a(e,n,l,o){return e[1]&&o?t(l.ctx.slice(),e[1](o(n))):l.ctx}function i(e,t,n,l){if(e[2]&&l){const o=e[2](l(n));if(void 0===t.dirty)return o;if("object"==typeof o){const e=[],n=Math.max(t.dirty.length,o.length);for(let l=0;l32){const t=[],n=e.ctx.length/32;for(let e=0;ee.removeEventListener(t,n,l)}function N(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function k(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}function E(e,t){e.value=null==t?"":t}function _(e,t,n){for(let n=0;n{const o=e.$$.callbacks[t];if(o){const s=function(e,t,{bubbles:n=!1,cancelable:l=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(e,n,l,t),o}(t,n,{cancelable:l});return o.slice().forEach((t=>{t.call(e,s)})),!s.defaultPrevented}return!0}}const V=[],A=[];let L=[];const I=[],K=Promise.resolve();let B=!1;function M(e){L.push(e)}const P=new Set;let j=0;function H(){if(0!==j)return;const e=S;do{try{for(;j{F.delete(e),l&&(n&&e.d(1),l())})),e.o(t)}else l&&l()}function U(e){e&&e.c()}function W(e,t,l,r){const{fragment:c,after_update:a}=e.$$;c&&c.m(t,l),r||M((()=>{const t=e.$$.on_mount.map(n).filter(s);e.$$.on_destroy?e.$$.on_destroy.push(...t):o(t),e.$$.on_mount=[]})),a.forEach(M)}function X(e,t){const n=e.$$;null!==n.fragment&&(!function(e){const t=[],n=[];L.forEach((l=>-1===e.indexOf(l)?t.push(l):n.push(l))),n.forEach((e=>e())),L=t}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function Y(e,t){-1===e.$$.dirty[0]&&(V.push(e),B||(B=!0,K.then(H)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<{const o=l.length?l[0]:n;return f.ctx&&c(f.ctx[e],f.ctx[e]=o)&&(!f.skip_bound&&f.bound[e]&&f.bound[e](o),p&&Y(t,e)),n})):[],f.update(),p=!0,o(f.before_update),f.fragment=!!r&&r(f.ctx),n.target){if(n.hydrate){const e=function(e){return Array.from(e.childNodes)}(n.target);f.fragment&&f.fragment.l(e),e.forEach(y)}else f.fragment&&f.fragment.c();n.intro&&J(t.$$.fragment),W(t,n.target,n.anchor,n.customElement),H()}T(u)}function ee(e){h(e,"svelte-dsaf7t","table.svelte-dsaf7t.svelte-dsaf7t{width:100%}.isSortable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}.isClickable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}tr.svelte-dsaf7t th select.svelte-dsaf7t{width:100%}")}function te(e,t,n){const l=e.slice();return l[56]=t[n],l[58]=n,l}const ne=e=>({row:8&e[0]}),le=e=>({row:e[56],n:e[58]});function oe(e,t,n){const l=e.slice();return l[59]=t[n],l[61]=n,l}const se=e=>({row:8&e[0]}),re=e=>({row:e[56],n:e[58]});function ce(e,t,n){const l=e.slice();return l[59]=t[n],l}const ae=e=>({sortOrder:2&e[0],sortBy:1&e[0]}),ie=e=>({sortOrder:e[1],sortBy:e[0]});function de(e,t,n){const l=e.slice();return l[59]=t[n],l[64]=t,l[65]=n,l}function ue(e,t,n){const l=e.slice();return l[66]=t[n],l}function fe(e){let t,n,l,o,s,r,c=(e[59].filterPlaceholder||"")+"",a=e[23][e[59].key],i=[];for(let t=0;t{X(e,1)})),G()}r?(n=O(r,c()),U(n.$$.fragment),J(n.$$.fragment,1),W(n,l.parentNode,l)):n=null}else r&&n.$set(o)},i(e){o||(n&&J(n.$$.fragment,e),o=!0)},o(e){n&&Q(n.$$.fragment,e),o=!1},d(e){e&&y(l),n&&X(n,e)}}}function ke(e){let t,n,l,s,r,c,a;const i=[Ne,be,we],d=[];function u(e,t){return e[59].renderComponent?0:e[59].parseHTML?1:2}function p(...t){return e[47](e[56],e[59],...t)}function h(...t){return e[48](e[56],e[59],...t)}return n=u(e),l=d[n]=i[n](e),{c(){t=$("td"),l.c(),N(t,"class",s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),d[n].m(t,null),r=!0,c||(a=[b(t,"click",p),b(t,"keypress",h)],c=!0)},p(o,c){let a=n;n=u(e=o),n===a?d[n].p(e,c):(z(),Q(d[a],1,1,(()=>{d[a]=null})),G(),l=d[n],l?l.p(e,c):(l=d[n]=i[n](e),l.c()),J(l,1),l.m(t,null)),(!r||8650776&c[0]&&s!==(s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t"))&&N(t,"class",s)},i(e){r||(J(l),r=!0)},o(e){Q(l),r=!1},d(e){e&&y(t),d[n].d(),c=!1,o(a)}}}function Ee(e){let t,n,l,s,r,c=(e[56].$expanded?e[9]:e[10])+"";function a(...t){return e[49](e[56],...t)}function i(...t){return e[50](e[56],...t)}return{c(){t=$("td"),n=$("span"),N(n,"class","isClickable svelte-dsaf7t"),N(n,"tabindex","0"),N(n,"role","button"),N(t,"class",l=f(e[26](e[22]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),n.innerHTML=c,s||(r=[b(n,"click",a),b(n,"keypress",i)],s=!0)},p(o,s){e=o,1544&s[0]&&c!==(c=(e[56].$expanded?e[9]:e[10])+"")&&(n.innerHTML=c),4194304&s[0]&&l!==(l=f(e[26](e[22]))+" svelte-dsaf7t")&&N(t,"class",l)},d(e){e&&y(t),s=!1,o(r)}}}function _e(e){let t,n,l,o;const s=e[42].expanded,r=c(s,e,e[41],le);return{c(){t=$("tr"),n=$("td"),r&&r.c(),N(n,"colspan",e[24]),N(t,"class",l=f(e[26](e[21]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),r&&r.m(n,null),o=!0},p(e,c){r&&r.p&&(!o||8&c[0]|1024&c[1])&&d(r,s,e,e[41],o?i(s,e[41],c,ne):u(e[41]),le),(!o||16777216&c[0])&&N(n,"colspan",e[24]),(!o||2097152&c[0]&&l!==(l=f(e[26](e[21]))+" svelte-dsaf7t"))&&N(t,"class",l)},i(e){o||(J(r,e),o=!0)},o(e){Q(r,e),o=!1},d(e){e&&y(t),r&&r.d(e)}}}function Ce(e){let t;const n=e[42].row,l=c(n,e,e[41],re),s=l||function(e){let t,n,l,s,r,c,a,i,d,u=e[4],h=[];for(let t=0;tQ(h[e],1,1,(()=>{h[e]=null}));let w=e[11]&&Ee(e);function k(...t){return e[51](e[56],...t)}function E(...t){return e[52](e[56],...t)}let _=e[56].$expanded&&_e(e);return{c(){t=$("tr");for(let e=0;e{_=null})),G())},i(e){if(!a){for(let e=0;eQ(C[e],1,1,(()=>{C[e]=null}));return{c(){t=$("table"),n=$("thead"),w&&w.c(),l=x(),E&&E.c(),s=x(),r=$("tbody");for(let e=0;e"";if(!Array.isArray(p))throw"'expanded' needs to be an array";if(!Array.isArray(h))throw"'selection' needs to be an array";null!==m&&console.warn("'expandRowKey' is deprecated in favour of 'rowKey'"),L&&!y&&console.error("'rowKey' is needed to use 'classNameRowSelected'");let j,H=r.some((e=>!e.hideFilterHeader&&(void 0!==e.filterOptions||void 0!==e.searchValue))),D={};const F=(e,t)=>{var l;t.sortable&&(n(1,(l=t.key,u=l===d?i[(i.findIndex((e=>e===u))+1)%i.length]:i[0])),n(0,d=u?t.key:void 0)),M("clickCol",{event:e,col:t,key:t.key})},q=(e,t)=>{v&&($?h.includes(t[y])?n(32,h=[]):n(32,h=[t[y]]):h.includes(t[y])?n(32,h=h.filter((e=>e!=t[y]))):n(32,h=[...h,t[y]].sort())),M("clickRow",{event:e,row:t})},z=(e,t)=>{t.$expanded=!t.$expanded;const l=t[y];g&&t.$expanded?n(31,p=[l]):g?n(31,p=[]):t.$expanded?n(31,p=[...p,l]):n(31,p=p.filter((e=>e!=l))),M("clickExpand",{event:e,row:t})},G=(e,t,n)=>{M("clickCell",{event:e,row:t,key:n})};return e.$$set=e=>{"columns"in e&&n(4,r=e.columns),"rows"in e&&n(33,c=e.rows),"c_rows"in e&&n(3,a=e.c_rows),"sortOrders"in e&&n(34,i=e.sortOrders),"sortBy"in e&&n(0,d=e.sortBy),"sortOrder"in e&&n(1,u=e.sortOrder),"filterSelections"in e&&n(2,f=e.filterSelections),"expanded"in e&&n(31,p=e.expanded),"selected"in e&&n(32,h=e.selected),"expandRowKey"in e&&n(35,m=e.expandRowKey),"rowKey"in e&&n(36,y=e.rowKey),"expandSingle"in e&&n(37,g=e.expandSingle),"selectSingle"in e&&n(38,$=e.selectSingle),"selectOnClick"in e&&n(5,v=e.selectOnClick),"iconAsc"in e&&n(6,x=e.iconAsc),"iconDesc"in e&&n(7,w=e.iconDesc),"iconSortable"in e&&n(8,b=e.iconSortable),"iconExpand"in e&&n(9,N=e.iconExpand),"iconExpanded"in e&&n(10,k=e.iconExpanded),"showExpandIcon"in e&&n(11,E=e.showExpandIcon),"classNameTable"in e&&n(12,_=e.classNameTable),"classNameThead"in e&&n(13,C=e.classNameThead),"classNameTbody"in e&&n(14,O=e.classNameTbody),"classNameSelect"in e&&n(15,S=e.classNameSelect),"classNameInput"in e&&n(16,T=e.classNameInput),"classNameRow"in e&&n(17,V=e.classNameRow),"classNameCell"in e&&n(18,A=e.classNameCell),"classNameRowSelected"in e&&n(19,L=e.classNameRowSelected),"classNameRowExpanded"in e&&n(20,I=e.classNameRowExpanded),"classNameExpandedContent"in e&&n(21,K=e.classNameExpandedContent),"classNameCellExpand"in e&&n(22,B=e.classNameCellExpand),"$$scope"in e&&n(41,s=e.$$scope)},e.$$.update=()=>{if(16&e.$$.dirty[0]&&(n(40,j={}),r.forEach((e=>{n(40,j[e.key]=e,j)}))),2064&e.$$.dirty[0]&&n(24,l=(E?1:0)+r.length),1&e.$$.dirty[0]|512&e.$$.dirty[1]){let e=j[d];void 0!==e&&!0===e.sortable&&"function"==typeof e.value&&n(39,P=t=>e.value(t))}7&e.$$.dirty[0]|807&e.$$.dirty[1]&&n(3,a=c.filter((e=>Object.keys(f).every((t=>{let n=null;if(void 0===j[t])return!0;if(j[t]?.searchValue){if(""===f[t])return!0;1===j[t].searchValue.length?n=(j[t].searchValue(e)+"").toLocaleLowerCase().indexOf((f[t]+"").toLocaleLowerCase())>=0:2===j[t].searchValue.length&&(n=!!j[t].searchValue(e,f[t]+""))}else n=!1;let l=null;return l=n||(void 0===f[t]||(2===j[t].filterValue?.length?!!j[t].filterValue(e,f[t]):1===j[t].filterValue?.length?f[t]===j[t].filterValue(e):f[t]===j[t].value(e))),l})))).map((e=>Object.assign({},e,{$sortOn:P(e),$expanded:null!==y&&p.indexOf(e[y])>=0,$selected:null!==y&&h.indexOf(e[y])>=0}))).sort(((e,t)=>d?e.$sortOn>t.$sortOn?u:e.$sortOn{"function"==typeof e.filterOptions?n(23,D[e.key]=e.filterOptions(c),D):Array.isArray(e.filterOptions)&&n(23,D[e.key]=e.filterOptions.map((e=>({name:e,value:e}))),D)})))},[d,u,f,a,r,v,x,w,b,N,k,E,_,C,O,S,T,V,A,L,I,K,B,D,l,H,e=>[].concat(e).filter((e=>null!==e&&"string"==typeof e&&""!==e)).join(" "),F,q,z,G,p,h,c,i,m,y,g,$,P,j,s,o,function(e){f[e.key]=this.value,n(2,f),n(23,D),n(4,r)},function(e){f[e.key]=function(e){const t=e.querySelector(":checked");return t&&t.__value}(this),n(2,f),n(23,D),n(4,r)},(e,t)=>F(t,e),(e,t)=>"Enter"===t.key&&F(t,e),(e,t,n)=>G(n,e,t.key),(e,t,n)=>"Enter"===n.key&&G(n,e,t.key),(e,t)=>z(t,e),(e,t)=>"Enter"===t.key&&z(t,e),(e,t)=>q(t,e),(e,t)=>"Enter"===t.key&&q(t,e)]}module.exports=class extends class{$destroy(){X(this,1),this.$destroy=e}$on(t,n){if(!s(n))return e;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const e=l.indexOf(n);-1!==e&&l.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}{constructor(e){super(),Z(this,e,Se,Oe,r,{columns:4,rows:33,c_rows:3,sortOrders:34,sortBy:0,sortOrder:1,filterSelections:2,expanded:31,selected:32,expandRowKey:35,rowKey:36,expandSingle:37,selectSingle:38,selectOnClick:5,iconAsc:6,iconDesc:7,iconSortable:8,iconExpand:9,iconExpanded:10,showExpandIcon:11,classNameTable:12,classNameThead:13,classNameTbody:14,classNameSelect:15,classNameInput:16,classNameRow:17,classNameCell:18,classNameRowSelected:19,classNameRowExpanded:20,classNameExpandedContent:21,classNameCellExpand:22},ee,[-1,-1,-1])}}; 2 | //# sourceMappingURL=SvelteTable.js.map 3 | -------------------------------------------------------------------------------- /dist/es/SvelteTable.mjs: -------------------------------------------------------------------------------- 1 | function e(){}function t(e,t){for(const n in t)e[n]=t[n];return e}function n(e){return e()}function l(){return Object.create(null)}function o(e){e.forEach(n)}function s(e){return"function"==typeof e}function r(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function c(e,t,n,l){if(e){const o=a(e,t,n,l);return e[0](o)}}function a(e,n,l,o){return e[1]&&o?t(l.ctx.slice(),e[1](o(n))):l.ctx}function i(e,t,n,l){if(e[2]&&l){const o=e[2](l(n));if(void 0===t.dirty)return o;if("object"==typeof o){const e=[],n=Math.max(t.dirty.length,o.length);for(let l=0;l32){const t=[],n=e.ctx.length/32;for(let e=0;ee.removeEventListener(t,n,l)}function N(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function k(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}function E(e,t){e.value=null==t?"":t}function _(e,t,n){for(let n=0;n{const o=e.$$.callbacks[t];if(o){const s=function(e,t,{bubbles:n=!1,cancelable:l=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(e,n,l,t),o}(t,n,{cancelable:l});return o.slice().forEach((t=>{t.call(e,s)})),!s.defaultPrevented}return!0}}const V=[],A=[];let L=[];const I=[],K=Promise.resolve();let B=!1;function M(e){L.push(e)}const P=new Set;let j=0;function H(){if(0!==j)return;const e=S;do{try{for(;j{F.delete(e),l&&(n&&e.d(1),l())})),e.o(t)}else l&&l()}function U(e){e&&e.c()}function W(e,t,l,r){const{fragment:c,after_update:a}=e.$$;c&&c.m(t,l),r||M((()=>{const t=e.$$.on_mount.map(n).filter(s);e.$$.on_destroy?e.$$.on_destroy.push(...t):o(t),e.$$.on_mount=[]})),a.forEach(M)}function X(e,t){const n=e.$$;null!==n.fragment&&(!function(e){const t=[],n=[];L.forEach((l=>-1===e.indexOf(l)?t.push(l):n.push(l))),n.forEach((e=>e())),L=t}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function Y(e,t){-1===e.$$.dirty[0]&&(V.push(e),B||(B=!0,K.then(H)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<{const o=l.length?l[0]:n;return f.ctx&&c(f.ctx[e],f.ctx[e]=o)&&(!f.skip_bound&&f.bound[e]&&f.bound[e](o),p&&Y(t,e)),n})):[],f.update(),p=!0,o(f.before_update),f.fragment=!!r&&r(f.ctx),n.target){if(n.hydrate){const e=function(e){return Array.from(e.childNodes)}(n.target);f.fragment&&f.fragment.l(e),e.forEach(y)}else f.fragment&&f.fragment.c();n.intro&&J(t.$$.fragment),W(t,n.target,n.anchor,n.customElement),H()}T(u)}function ee(e){h(e,"svelte-dsaf7t","table.svelte-dsaf7t.svelte-dsaf7t{width:100%}.isSortable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}.isClickable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}tr.svelte-dsaf7t th select.svelte-dsaf7t{width:100%}")}function te(e,t,n){const l=e.slice();return l[56]=t[n],l[58]=n,l}const ne=e=>({row:8&e[0]}),le=e=>({row:e[56],n:e[58]});function oe(e,t,n){const l=e.slice();return l[59]=t[n],l[61]=n,l}const se=e=>({row:8&e[0]}),re=e=>({row:e[56],n:e[58]});function ce(e,t,n){const l=e.slice();return l[59]=t[n],l}const ae=e=>({sortOrder:2&e[0],sortBy:1&e[0]}),ie=e=>({sortOrder:e[1],sortBy:e[0]});function de(e,t,n){const l=e.slice();return l[59]=t[n],l[64]=t,l[65]=n,l}function ue(e,t,n){const l=e.slice();return l[66]=t[n],l}function fe(e){let t,n,l,o,s,r,c=(e[59].filterPlaceholder||"")+"",a=e[23][e[59].key],i=[];for(let t=0;t{X(e,1)})),G()}r?(n=O(r,c()),U(n.$$.fragment),J(n.$$.fragment,1),W(n,l.parentNode,l)):n=null}else r&&n.$set(o)},i(e){o||(n&&J(n.$$.fragment,e),o=!0)},o(e){n&&Q(n.$$.fragment,e),o=!1},d(e){e&&y(l),n&&X(n,e)}}}function ke(e){let t,n,l,s,r,c,a;const i=[Ne,be,we],d=[];function u(e,t){return e[59].renderComponent?0:e[59].parseHTML?1:2}function p(...t){return e[47](e[56],e[59],...t)}function h(...t){return e[48](e[56],e[59],...t)}return n=u(e),l=d[n]=i[n](e),{c(){t=$("td"),l.c(),N(t,"class",s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),d[n].m(t,null),r=!0,c||(a=[b(t,"click",p),b(t,"keypress",h)],c=!0)},p(o,c){let a=n;n=u(e=o),n===a?d[n].p(e,c):(z(),Q(d[a],1,1,(()=>{d[a]=null})),G(),l=d[n],l?l.p(e,c):(l=d[n]=i[n](e),l.c()),J(l,1),l.m(t,null)),(!r||8650776&c[0]&&s!==(s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t"))&&N(t,"class",s)},i(e){r||(J(l),r=!0)},o(e){Q(l),r=!1},d(e){e&&y(t),d[n].d(),c=!1,o(a)}}}function Ee(e){let t,n,l,s,r,c=(e[56].$expanded?e[9]:e[10])+"";function a(...t){return e[49](e[56],...t)}function i(...t){return e[50](e[56],...t)}return{c(){t=$("td"),n=$("span"),N(n,"class","isClickable svelte-dsaf7t"),N(n,"tabindex","0"),N(n,"role","button"),N(t,"class",l=f(e[26](e[22]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),n.innerHTML=c,s||(r=[b(n,"click",a),b(n,"keypress",i)],s=!0)},p(o,s){e=o,1544&s[0]&&c!==(c=(e[56].$expanded?e[9]:e[10])+"")&&(n.innerHTML=c),4194304&s[0]&&l!==(l=f(e[26](e[22]))+" svelte-dsaf7t")&&N(t,"class",l)},d(e){e&&y(t),s=!1,o(r)}}}function _e(e){let t,n,l,o;const s=e[42].expanded,r=c(s,e,e[41],le);return{c(){t=$("tr"),n=$("td"),r&&r.c(),N(n,"colspan",e[24]),N(t,"class",l=f(e[26](e[21]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),r&&r.m(n,null),o=!0},p(e,c){r&&r.p&&(!o||8&c[0]|1024&c[1])&&d(r,s,e,e[41],o?i(s,e[41],c,ne):u(e[41]),le),(!o||16777216&c[0])&&N(n,"colspan",e[24]),(!o||2097152&c[0]&&l!==(l=f(e[26](e[21]))+" svelte-dsaf7t"))&&N(t,"class",l)},i(e){o||(J(r,e),o=!0)},o(e){Q(r,e),o=!1},d(e){e&&y(t),r&&r.d(e)}}}function Ce(e){let t;const n=e[42].row,l=c(n,e,e[41],re),s=l||function(e){let t,n,l,s,r,c,a,i,d,u=e[4],h=[];for(let t=0;tQ(h[e],1,1,(()=>{h[e]=null}));let w=e[11]&&Ee(e);function k(...t){return e[51](e[56],...t)}function E(...t){return e[52](e[56],...t)}let _=e[56].$expanded&&_e(e);return{c(){t=$("tr");for(let e=0;e{_=null})),G())},i(e){if(!a){for(let e=0;eQ(C[e],1,1,(()=>{C[e]=null}));return{c(){t=$("table"),n=$("thead"),w&&w.c(),l=x(),E&&E.c(),s=x(),r=$("tbody");for(let e=0;e"";if(!Array.isArray(p))throw"'expanded' needs to be an array";if(!Array.isArray(h))throw"'selection' needs to be an array";null!==m&&console.warn("'expandRowKey' is deprecated in favour of 'rowKey'"),L&&!y&&console.error("'rowKey' is needed to use 'classNameRowSelected'");let j,H=r.some((e=>!e.hideFilterHeader&&(void 0!==e.filterOptions||void 0!==e.searchValue))),D={};const F=(e,t)=>{var l;t.sortable&&(n(1,(l=t.key,u=l===d?i[(i.findIndex((e=>e===u))+1)%i.length]:i[0])),n(0,d=u?t.key:void 0)),M("clickCol",{event:e,col:t,key:t.key})},q=(e,t)=>{v&&($?h.includes(t[y])?n(32,h=[]):n(32,h=[t[y]]):h.includes(t[y])?n(32,h=h.filter((e=>e!=t[y]))):n(32,h=[...h,t[y]].sort())),M("clickRow",{event:e,row:t})},z=(e,t)=>{t.$expanded=!t.$expanded;const l=t[y];g&&t.$expanded?n(31,p=[l]):g?n(31,p=[]):t.$expanded?n(31,p=[...p,l]):n(31,p=p.filter((e=>e!=l))),M("clickExpand",{event:e,row:t})},G=(e,t,n)=>{M("clickCell",{event:e,row:t,key:n})};return e.$$set=e=>{"columns"in e&&n(4,r=e.columns),"rows"in e&&n(33,c=e.rows),"c_rows"in e&&n(3,a=e.c_rows),"sortOrders"in e&&n(34,i=e.sortOrders),"sortBy"in e&&n(0,d=e.sortBy),"sortOrder"in e&&n(1,u=e.sortOrder),"filterSelections"in e&&n(2,f=e.filterSelections),"expanded"in e&&n(31,p=e.expanded),"selected"in e&&n(32,h=e.selected),"expandRowKey"in e&&n(35,m=e.expandRowKey),"rowKey"in e&&n(36,y=e.rowKey),"expandSingle"in e&&n(37,g=e.expandSingle),"selectSingle"in e&&n(38,$=e.selectSingle),"selectOnClick"in e&&n(5,v=e.selectOnClick),"iconAsc"in e&&n(6,x=e.iconAsc),"iconDesc"in e&&n(7,w=e.iconDesc),"iconSortable"in e&&n(8,b=e.iconSortable),"iconExpand"in e&&n(9,N=e.iconExpand),"iconExpanded"in e&&n(10,k=e.iconExpanded),"showExpandIcon"in e&&n(11,E=e.showExpandIcon),"classNameTable"in e&&n(12,_=e.classNameTable),"classNameThead"in e&&n(13,C=e.classNameThead),"classNameTbody"in e&&n(14,O=e.classNameTbody),"classNameSelect"in e&&n(15,S=e.classNameSelect),"classNameInput"in e&&n(16,T=e.classNameInput),"classNameRow"in e&&n(17,V=e.classNameRow),"classNameCell"in e&&n(18,A=e.classNameCell),"classNameRowSelected"in e&&n(19,L=e.classNameRowSelected),"classNameRowExpanded"in e&&n(20,I=e.classNameRowExpanded),"classNameExpandedContent"in e&&n(21,K=e.classNameExpandedContent),"classNameCellExpand"in e&&n(22,B=e.classNameCellExpand),"$$scope"in e&&n(41,s=e.$$scope)},e.$$.update=()=>{if(16&e.$$.dirty[0]&&(n(40,j={}),r.forEach((e=>{n(40,j[e.key]=e,j)}))),2064&e.$$.dirty[0]&&n(24,l=(E?1:0)+r.length),1&e.$$.dirty[0]|512&e.$$.dirty[1]){let e=j[d];void 0!==e&&!0===e.sortable&&"function"==typeof e.value&&n(39,P=t=>e.value(t))}7&e.$$.dirty[0]|807&e.$$.dirty[1]&&n(3,a=c.filter((e=>Object.keys(f).every((t=>{let n=null;if(void 0===j[t])return!0;if(j[t]?.searchValue){if(""===f[t])return!0;1===j[t].searchValue.length?n=(j[t].searchValue(e)+"").toLocaleLowerCase().indexOf((f[t]+"").toLocaleLowerCase())>=0:2===j[t].searchValue.length&&(n=!!j[t].searchValue(e,f[t]+""))}else n=!1;let l=null;return l=n||(void 0===f[t]||(2===j[t].filterValue?.length?!!j[t].filterValue(e,f[t]):1===j[t].filterValue?.length?f[t]===j[t].filterValue(e):f[t]===j[t].value(e))),l})))).map((e=>Object.assign({},e,{$sortOn:P(e),$expanded:null!==y&&p.indexOf(e[y])>=0,$selected:null!==y&&h.indexOf(e[y])>=0}))).sort(((e,t)=>d?e.$sortOn>t.$sortOn?u:e.$sortOn{"function"==typeof e.filterOptions?n(23,D[e.key]=e.filterOptions(c),D):Array.isArray(e.filterOptions)&&n(23,D[e.key]=e.filterOptions.map((e=>({name:e,value:e}))),D)})))},[d,u,f,a,r,v,x,w,b,N,k,E,_,C,O,S,T,V,A,L,I,K,B,D,l,H,e=>[].concat(e).filter((e=>null!==e&&"string"==typeof e&&""!==e)).join(" "),F,q,z,G,p,h,c,i,m,y,g,$,P,j,s,o,function(e){f[e.key]=this.value,n(2,f),n(23,D),n(4,r)},function(e){f[e.key]=function(e){const t=e.querySelector(":checked");return t&&t.__value}(this),n(2,f),n(23,D),n(4,r)},(e,t)=>F(t,e),(e,t)=>"Enter"===t.key&&F(t,e),(e,t,n)=>G(n,e,t.key),(e,t,n)=>"Enter"===n.key&&G(n,e,t.key),(e,t)=>z(t,e),(e,t)=>"Enter"===t.key&&z(t,e),(e,t)=>q(t,e),(e,t)=>"Enter"===t.key&&q(t,e)]}class Te extends class{$destroy(){X(this,1),this.$destroy=e}$on(t,n){if(!s(n))return e;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const e=l.indexOf(n);-1!==e&&l.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}{constructor(e){super(),Z(this,e,Se,Oe,r,{columns:4,rows:33,c_rows:3,sortOrders:34,sortBy:0,sortOrder:1,filterSelections:2,expanded:31,selected:32,expandRowKey:35,rowKey:36,expandSingle:37,selectSingle:38,selectOnClick:5,iconAsc:6,iconDesc:7,iconSortable:8,iconExpand:9,iconExpanded:10,showExpandIcon:11,classNameTable:12,classNameThead:13,classNameTbody:14,classNameSelect:15,classNameInput:16,classNameRow:17,classNameCell:18,classNameRowSelected:19,classNameRowExpanded:20,classNameExpandedContent:21,classNameCellExpand:22},ee,[-1,-1,-1])}}export{Te as default}; 2 | //# sourceMappingURL=SvelteTable.mjs.map 3 | -------------------------------------------------------------------------------- /dist/iife/SvelteTable.js: -------------------------------------------------------------------------------- 1 | var SvelteTable=function(){"use strict";function e(){}function t(e,t){for(const n in t)e[n]=t[n];return e}function n(e){return e()}function l(){return Object.create(null)}function o(e){e.forEach(n)}function s(e){return"function"==typeof e}function r(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function c(e,t,n,l){if(e){const o=a(e,t,n,l);return e[0](o)}}function a(e,n,l,o){return e[1]&&o?t(l.ctx.slice(),e[1](o(n))):l.ctx}function i(e,t,n,l){if(e[2]&&l){const o=e[2](l(n));if(void 0===t.dirty)return o;if("object"==typeof o){const e=[],n=Math.max(t.dirty.length,o.length);for(let l=0;l32){const t=[],n=e.ctx.length/32;for(let e=0;ee.removeEventListener(t,n,l)}function N(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function k(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}function E(e,t){e.value=null==t?"":t}function _(e,t,n){for(let n=0;n{const o=e.$$.callbacks[t];if(o){const s=function(e,t,{bubbles:n=!1,cancelable:l=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(e,n,l,t),o}(t,n,{cancelable:l});return o.slice().forEach((t=>{t.call(e,s)})),!s.defaultPrevented}return!0}}const V=[],A=[];let L=[];const I=[],K=Promise.resolve();let B=!1;function M(e){L.push(e)}const P=new Set;let j=0;function H(){if(0!==j)return;const e=S;do{try{for(;j{F.delete(e),l&&(n&&e.d(1),l())})),e.o(t)}else l&&l()}function U(e){e&&e.c()}function W(e,t,l,r){const{fragment:c,after_update:a}=e.$$;c&&c.m(t,l),r||M((()=>{const t=e.$$.on_mount.map(n).filter(s);e.$$.on_destroy?e.$$.on_destroy.push(...t):o(t),e.$$.on_mount=[]})),a.forEach(M)}function X(e,t){const n=e.$$;null!==n.fragment&&(!function(e){const t=[],n=[];L.forEach((l=>-1===e.indexOf(l)?t.push(l):n.push(l))),n.forEach((e=>e())),L=t}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function Y(e,t){-1===e.$$.dirty[0]&&(V.push(e),B||(B=!0,K.then(H)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<{const o=l.length?l[0]:n;return f.ctx&&c(f.ctx[e],f.ctx[e]=o)&&(!f.skip_bound&&f.bound[e]&&f.bound[e](o),p&&Y(t,e)),n})):[],f.update(),p=!0,o(f.before_update),f.fragment=!!r&&r(f.ctx),n.target){if(n.hydrate){const e=function(e){return Array.from(e.childNodes)}(n.target);f.fragment&&f.fragment.l(e),e.forEach(y)}else f.fragment&&f.fragment.c();n.intro&&J(t.$$.fragment),W(t,n.target,n.anchor,n.customElement),H()}T(u)}function ee(e){h(e,"svelte-dsaf7t","table.svelte-dsaf7t.svelte-dsaf7t{width:100%}.isSortable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}.isClickable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}tr.svelte-dsaf7t th select.svelte-dsaf7t{width:100%}")}function te(e,t,n){const l=e.slice();return l[56]=t[n],l[58]=n,l}const ne=e=>({row:8&e[0]}),le=e=>({row:e[56],n:e[58]});function oe(e,t,n){const l=e.slice();return l[59]=t[n],l[61]=n,l}const se=e=>({row:8&e[0]}),re=e=>({row:e[56],n:e[58]});function ce(e,t,n){const l=e.slice();return l[59]=t[n],l}const ae=e=>({sortOrder:2&e[0],sortBy:1&e[0]}),ie=e=>({sortOrder:e[1],sortBy:e[0]});function de(e,t,n){const l=e.slice();return l[59]=t[n],l[64]=t,l[65]=n,l}function ue(e,t,n){const l=e.slice();return l[66]=t[n],l}function fe(e){let t,n,l,o,s,r,c=(e[59].filterPlaceholder||"")+"",a=e[23][e[59].key],i=[];for(let t=0;t{X(e,1)})),G()}r?(n=O(r,c()),U(n.$$.fragment),J(n.$$.fragment,1),W(n,l.parentNode,l)):n=null}else r&&n.$set(o)},i(e){o||(n&&J(n.$$.fragment,e),o=!0)},o(e){n&&Q(n.$$.fragment,e),o=!1},d(e){e&&y(l),n&&X(n,e)}}}function ke(e){let t,n,l,s,r,c,a;const i=[Ne,be,we],d=[];function u(e,t){return e[59].renderComponent?0:e[59].parseHTML?1:2}function p(...t){return e[47](e[56],e[59],...t)}function h(...t){return e[48](e[56],e[59],...t)}return n=u(e),l=d[n]=i[n](e),{c(){t=$("td"),l.c(),N(t,"class",s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),d[n].m(t,null),r=!0,c||(a=[b(t,"click",p),b(t,"keypress",h)],c=!0)},p(o,c){let a=n;n=u(e=o),n===a?d[n].p(e,c):(z(),Q(d[a],1,1,(()=>{d[a]=null})),G(),l=d[n],l?l.p(e,c):(l=d[n]=i[n](e),l.c()),J(l,1),l.m(t,null)),(!r||8650776&c[0]&&s!==(s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t"))&&N(t,"class",s)},i(e){r||(J(l),r=!0)},o(e){Q(l),r=!1},d(e){e&&y(t),d[n].d(),c=!1,o(a)}}}function Ee(e){let t,n,l,s,r,c=(e[56].$expanded?e[9]:e[10])+"";function a(...t){return e[49](e[56],...t)}function i(...t){return e[50](e[56],...t)}return{c(){t=$("td"),n=$("span"),N(n,"class","isClickable svelte-dsaf7t"),N(n,"tabindex","0"),N(n,"role","button"),N(t,"class",l=f(e[26](e[22]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),n.innerHTML=c,s||(r=[b(n,"click",a),b(n,"keypress",i)],s=!0)},p(o,s){e=o,1544&s[0]&&c!==(c=(e[56].$expanded?e[9]:e[10])+"")&&(n.innerHTML=c),4194304&s[0]&&l!==(l=f(e[26](e[22]))+" svelte-dsaf7t")&&N(t,"class",l)},d(e){e&&y(t),s=!1,o(r)}}}function _e(e){let t,n,l,o;const s=e[42].expanded,r=c(s,e,e[41],le);return{c(){t=$("tr"),n=$("td"),r&&r.c(),N(n,"colspan",e[24]),N(t,"class",l=f(e[26](e[21]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),r&&r.m(n,null),o=!0},p(e,c){r&&r.p&&(!o||8&c[0]|1024&c[1])&&d(r,s,e,e[41],o?i(s,e[41],c,ne):u(e[41]),le),(!o||16777216&c[0])&&N(n,"colspan",e[24]),(!o||2097152&c[0]&&l!==(l=f(e[26](e[21]))+" svelte-dsaf7t"))&&N(t,"class",l)},i(e){o||(J(r,e),o=!0)},o(e){Q(r,e),o=!1},d(e){e&&y(t),r&&r.d(e)}}}function Ce(e){let t;const n=e[42].row,l=c(n,e,e[41],re),s=l||function(e){let t,n,l,s,r,c,a,i,d,u=e[4],h=[];for(let t=0;tQ(h[e],1,1,(()=>{h[e]=null}));let w=e[11]&&Ee(e);function k(...t){return e[51](e[56],...t)}function E(...t){return e[52](e[56],...t)}let _=e[56].$expanded&&_e(e);return{c(){t=$("tr");for(let e=0;e{_=null})),G())},i(e){if(!a){for(let e=0;eQ(C[e],1,1,(()=>{C[e]=null}));return{c(){t=$("table"),n=$("thead"),w&&w.c(),l=x(),E&&E.c(),s=x(),r=$("tbody");for(let e=0;e"";if(!Array.isArray(p))throw"'expanded' needs to be an array";if(!Array.isArray(h))throw"'selection' needs to be an array";null!==m&&console.warn("'expandRowKey' is deprecated in favour of 'rowKey'"),L&&!y&&console.error("'rowKey' is needed to use 'classNameRowSelected'");let j,H=r.some((e=>!e.hideFilterHeader&&(void 0!==e.filterOptions||void 0!==e.searchValue))),D={};const F=(e,t)=>{var l;t.sortable&&(n(1,(l=t.key,u=l===d?i[(i.findIndex((e=>e===u))+1)%i.length]:i[0])),n(0,d=u?t.key:void 0)),M("clickCol",{event:e,col:t,key:t.key})},q=(e,t)=>{v&&($?h.includes(t[y])?n(32,h=[]):n(32,h=[t[y]]):h.includes(t[y])?n(32,h=h.filter((e=>e!=t[y]))):n(32,h=[...h,t[y]].sort())),M("clickRow",{event:e,row:t})},z=(e,t)=>{t.$expanded=!t.$expanded;const l=t[y];g&&t.$expanded?n(31,p=[l]):g?n(31,p=[]):t.$expanded?n(31,p=[...p,l]):n(31,p=p.filter((e=>e!=l))),M("clickExpand",{event:e,row:t})},G=(e,t,n)=>{M("clickCell",{event:e,row:t,key:n})};return e.$$set=e=>{"columns"in e&&n(4,r=e.columns),"rows"in e&&n(33,c=e.rows),"c_rows"in e&&n(3,a=e.c_rows),"sortOrders"in e&&n(34,i=e.sortOrders),"sortBy"in e&&n(0,d=e.sortBy),"sortOrder"in e&&n(1,u=e.sortOrder),"filterSelections"in e&&n(2,f=e.filterSelections),"expanded"in e&&n(31,p=e.expanded),"selected"in e&&n(32,h=e.selected),"expandRowKey"in e&&n(35,m=e.expandRowKey),"rowKey"in e&&n(36,y=e.rowKey),"expandSingle"in e&&n(37,g=e.expandSingle),"selectSingle"in e&&n(38,$=e.selectSingle),"selectOnClick"in e&&n(5,v=e.selectOnClick),"iconAsc"in e&&n(6,x=e.iconAsc),"iconDesc"in e&&n(7,w=e.iconDesc),"iconSortable"in e&&n(8,b=e.iconSortable),"iconExpand"in e&&n(9,N=e.iconExpand),"iconExpanded"in e&&n(10,k=e.iconExpanded),"showExpandIcon"in e&&n(11,E=e.showExpandIcon),"classNameTable"in e&&n(12,_=e.classNameTable),"classNameThead"in e&&n(13,C=e.classNameThead),"classNameTbody"in e&&n(14,O=e.classNameTbody),"classNameSelect"in e&&n(15,S=e.classNameSelect),"classNameInput"in e&&n(16,T=e.classNameInput),"classNameRow"in e&&n(17,V=e.classNameRow),"classNameCell"in e&&n(18,A=e.classNameCell),"classNameRowSelected"in e&&n(19,L=e.classNameRowSelected),"classNameRowExpanded"in e&&n(20,I=e.classNameRowExpanded),"classNameExpandedContent"in e&&n(21,K=e.classNameExpandedContent),"classNameCellExpand"in e&&n(22,B=e.classNameCellExpand),"$$scope"in e&&n(41,s=e.$$scope)},e.$$.update=()=>{if(16&e.$$.dirty[0]&&(n(40,j={}),r.forEach((e=>{n(40,j[e.key]=e,j)}))),2064&e.$$.dirty[0]&&n(24,l=(E?1:0)+r.length),1&e.$$.dirty[0]|512&e.$$.dirty[1]){let e=j[d];void 0!==e&&!0===e.sortable&&"function"==typeof e.value&&n(39,P=t=>e.value(t))}7&e.$$.dirty[0]|807&e.$$.dirty[1]&&n(3,a=c.filter((e=>Object.keys(f).every((t=>{let n=null;if(void 0===j[t])return!0;if(j[t]?.searchValue){if(""===f[t])return!0;1===j[t].searchValue.length?n=(j[t].searchValue(e)+"").toLocaleLowerCase().indexOf((f[t]+"").toLocaleLowerCase())>=0:2===j[t].searchValue.length&&(n=!!j[t].searchValue(e,f[t]+""))}else n=!1;let l=null;return l=n||(void 0===f[t]||(2===j[t].filterValue?.length?!!j[t].filterValue(e,f[t]):1===j[t].filterValue?.length?f[t]===j[t].filterValue(e):f[t]===j[t].value(e))),l})))).map((e=>Object.assign({},e,{$sortOn:P(e),$expanded:null!==y&&p.indexOf(e[y])>=0,$selected:null!==y&&h.indexOf(e[y])>=0}))).sort(((e,t)=>d?e.$sortOn>t.$sortOn?u:e.$sortOn{"function"==typeof e.filterOptions?n(23,D[e.key]=e.filterOptions(c),D):Array.isArray(e.filterOptions)&&n(23,D[e.key]=e.filterOptions.map((e=>({name:e,value:e}))),D)})))},[d,u,f,a,r,v,x,w,b,N,k,E,_,C,O,S,T,V,A,L,I,K,B,D,l,H,e=>[].concat(e).filter((e=>null!==e&&"string"==typeof e&&""!==e)).join(" "),F,q,z,G,p,h,c,i,m,y,g,$,P,j,s,o,function(e){f[e.key]=this.value,n(2,f),n(23,D),n(4,r)},function(e){f[e.key]=function(e){const t=e.querySelector(":checked");return t&&t.__value}(this),n(2,f),n(23,D),n(4,r)},(e,t)=>F(t,e),(e,t)=>"Enter"===t.key&&F(t,e),(e,t,n)=>G(n,e,t.key),(e,t,n)=>"Enter"===n.key&&G(n,e,t.key),(e,t)=>z(t,e),(e,t)=>"Enter"===t.key&&z(t,e),(e,t)=>q(t,e),(e,t)=>"Enter"===t.key&&q(t,e)]}return class extends class{$destroy(){X(this,1),this.$destroy=e}$on(t,n){if(!s(n))return e;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const e=l.indexOf(n);-1!==e&&l.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}{constructor(e){super(),Z(this,e,Se,Oe,r,{columns:4,rows:33,c_rows:3,sortOrders:34,sortBy:0,sortOrder:1,filterSelections:2,expanded:31,selected:32,expandRowKey:35,rowKey:36,expandSingle:37,selectSingle:38,selectOnClick:5,iconAsc:6,iconDesc:7,iconSortable:8,iconExpand:9,iconExpanded:10,showExpandIcon:11,classNameTable:12,classNameThead:13,classNameTbody:14,classNameSelect:15,classNameInput:16,classNameRow:17,classNameCell:18,classNameRowSelected:19,classNameRowExpanded:20,classNameExpandedContent:21,classNameCellExpand:22},ee,[-1,-1,-1])}}}(); 2 | //# sourceMappingURL=SvelteTable.js.map 3 | -------------------------------------------------------------------------------- /dist/umd/SvelteTable.js: -------------------------------------------------------------------------------- 1 | !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).SvelteTable=t()}(this,(function(){"use strict";function e(){}function t(e,t){for(const n in t)e[n]=t[n];return e}function n(e){return e()}function l(){return Object.create(null)}function o(e){e.forEach(n)}function s(e){return"function"==typeof e}function r(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function c(e,t,n,l){if(e){const o=a(e,t,n,l);return e[0](o)}}function a(e,n,l,o){return e[1]&&o?t(l.ctx.slice(),e[1](o(n))):l.ctx}function i(e,t,n,l){if(e[2]&&l){const o=e[2](l(n));if(void 0===t.dirty)return o;if("object"==typeof o){const e=[],n=Math.max(t.dirty.length,o.length);for(let l=0;l32){const t=[],n=e.ctx.length/32;for(let e=0;ee.removeEventListener(t,n,l)}function N(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function k(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}function E(e,t){e.value=null==t?"":t}function _(e,t,n){for(let n=0;n{const o=e.$$.callbacks[t];if(o){const s=function(e,t,{bubbles:n=!1,cancelable:l=!1}={}){const o=document.createEvent("CustomEvent");return o.initCustomEvent(e,n,l,t),o}(t,n,{cancelable:l});return o.slice().forEach((t=>{t.call(e,s)})),!s.defaultPrevented}return!0}}const V=[],A=[];let L=[];const I=[],K=Promise.resolve();let B=!1;function j(e){L.push(e)}const M=new Set;let P=0;function H(){if(0!==P)return;const e=S;do{try{for(;P{F.delete(e),l&&(n&&e.d(1),l())})),e.o(t)}else l&&l()}function U(e){e&&e.c()}function W(e,t,l,r){const{fragment:c,after_update:a}=e.$$;c&&c.m(t,l),r||j((()=>{const t=e.$$.on_mount.map(n).filter(s);e.$$.on_destroy?e.$$.on_destroy.push(...t):o(t),e.$$.on_mount=[]})),a.forEach(j)}function X(e,t){const n=e.$$;null!==n.fragment&&(!function(e){const t=[],n=[];L.forEach((l=>-1===e.indexOf(l)?t.push(l):n.push(l))),n.forEach((e=>e())),L=t}(n.after_update),o(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function Y(e,t){-1===e.$$.dirty[0]&&(V.push(e),B||(B=!0,K.then(H)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<{const o=l.length?l[0]:n;return f.ctx&&c(f.ctx[e],f.ctx[e]=o)&&(!f.skip_bound&&f.bound[e]&&f.bound[e](o),p&&Y(t,e)),n})):[],f.update(),p=!0,o(f.before_update),f.fragment=!!r&&r(f.ctx),n.target){if(n.hydrate){const e=function(e){return Array.from(e.childNodes)}(n.target);f.fragment&&f.fragment.l(e),e.forEach(y)}else f.fragment&&f.fragment.c();n.intro&&J(t.$$.fragment),W(t,n.target,n.anchor,n.customElement),H()}T(u)}function ee(e){h(e,"svelte-dsaf7t","table.svelte-dsaf7t.svelte-dsaf7t{width:100%}.isSortable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}.isClickable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}tr.svelte-dsaf7t th select.svelte-dsaf7t{width:100%}")}function te(e,t,n){const l=e.slice();return l[56]=t[n],l[58]=n,l}const ne=e=>({row:8&e[0]}),le=e=>({row:e[56],n:e[58]});function oe(e,t,n){const l=e.slice();return l[59]=t[n],l[61]=n,l}const se=e=>({row:8&e[0]}),re=e=>({row:e[56],n:e[58]});function ce(e,t,n){const l=e.slice();return l[59]=t[n],l}const ae=e=>({sortOrder:2&e[0],sortBy:1&e[0]}),ie=e=>({sortOrder:e[1],sortBy:e[0]});function de(e,t,n){const l=e.slice();return l[59]=t[n],l[64]=t,l[65]=n,l}function ue(e,t,n){const l=e.slice();return l[66]=t[n],l}function fe(e){let t,n,l,o,s,r,c=(e[59].filterPlaceholder||"")+"",a=e[23][e[59].key],i=[];for(let t=0;t{X(e,1)})),G()}r?(n=O(r,c()),U(n.$$.fragment),J(n.$$.fragment,1),W(n,l.parentNode,l)):n=null}else r&&n.$set(o)},i(e){o||(n&&J(n.$$.fragment,e),o=!0)},o(e){n&&Q(n.$$.fragment,e),o=!1},d(e){e&&y(l),n&&X(n,e)}}}function ke(e){let t,n,l,s,r,c,a;const i=[Ne,be,we],d=[];function u(e,t){return e[59].renderComponent?0:e[59].parseHTML?1:2}function p(...t){return e[47](e[56],e[59],...t)}function h(...t){return e[48](e[56],e[59],...t)}return n=u(e),l=d[n]=i[n](e),{c(){t=$("td"),l.c(),N(t,"class",s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),d[n].m(t,null),r=!0,c||(a=[b(t,"click",p),b(t,"keypress",h)],c=!0)},p(o,c){let a=n;n=u(e=o),n===a?d[n].p(e,c):(z(),Q(d[a],1,1,(()=>{d[a]=null})),G(),l=d[n],l?l.p(e,c):(l=d[n]=i[n](e),l.c()),J(l,1),l.m(t,null)),(!r||8650776&c[0]&&s!==(s=f(e[26](["string"==typeof e[59].class?e[59].class:null,"function"==typeof e[59].class?e[59].class(e[56],e[58],e[61]):null,e[18]]))+" svelte-dsaf7t"))&&N(t,"class",s)},i(e){r||(J(l),r=!0)},o(e){Q(l),r=!1},d(e){e&&y(t),d[n].d(),c=!1,o(a)}}}function Ee(e){let t,n,l,s,r,c=(e[56].$expanded?e[9]:e[10])+"";function a(...t){return e[49](e[56],...t)}function i(...t){return e[50](e[56],...t)}return{c(){t=$("td"),n=$("span"),N(n,"class","isClickable svelte-dsaf7t"),N(n,"tabindex","0"),N(n,"role","button"),N(t,"class",l=f(e[26](e[22]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),n.innerHTML=c,s||(r=[b(n,"click",a),b(n,"keypress",i)],s=!0)},p(o,s){e=o,1544&s[0]&&c!==(c=(e[56].$expanded?e[9]:e[10])+"")&&(n.innerHTML=c),4194304&s[0]&&l!==(l=f(e[26](e[22]))+" svelte-dsaf7t")&&N(t,"class",l)},d(e){e&&y(t),s=!1,o(r)}}}function _e(e){let t,n,l,o;const s=e[42].expanded,r=c(s,e,e[41],le);return{c(){t=$("tr"),n=$("td"),r&&r.c(),N(n,"colspan",e[24]),N(t,"class",l=f(e[26](e[21]))+" svelte-dsaf7t")},m(e,l){m(e,t,l),p(t,n),r&&r.m(n,null),o=!0},p(e,c){r&&r.p&&(!o||8&c[0]|1024&c[1])&&d(r,s,e,e[41],o?i(s,e[41],c,ne):u(e[41]),le),(!o||16777216&c[0])&&N(n,"colspan",e[24]),(!o||2097152&c[0]&&l!==(l=f(e[26](e[21]))+" svelte-dsaf7t"))&&N(t,"class",l)},i(e){o||(J(r,e),o=!0)},o(e){Q(r,e),o=!1},d(e){e&&y(t),r&&r.d(e)}}}function Ce(e){let t;const n=e[42].row,l=c(n,e,e[41],re),s=l||function(e){let t,n,l,s,r,c,a,i,d,u=e[4],h=[];for(let t=0;tQ(h[e],1,1,(()=>{h[e]=null}));let w=e[11]&&Ee(e);function k(...t){return e[51](e[56],...t)}function E(...t){return e[52](e[56],...t)}let _=e[56].$expanded&&_e(e);return{c(){t=$("tr");for(let e=0;e{_=null})),G())},i(e){if(!a){for(let e=0;eQ(C[e],1,1,(()=>{C[e]=null}));return{c(){t=$("table"),n=$("thead"),w&&w.c(),l=x(),E&&E.c(),s=x(),r=$("tbody");for(let e=0;e"";if(!Array.isArray(p))throw"'expanded' needs to be an array";if(!Array.isArray(h))throw"'selection' needs to be an array";null!==m&&console.warn("'expandRowKey' is deprecated in favour of 'rowKey'"),L&&!y&&console.error("'rowKey' is needed to use 'classNameRowSelected'");let P,H=r.some((e=>!e.hideFilterHeader&&(void 0!==e.filterOptions||void 0!==e.searchValue))),D={};const F=(e,t)=>{var l;t.sortable&&(n(1,(l=t.key,u=l===d?i[(i.findIndex((e=>e===u))+1)%i.length]:i[0])),n(0,d=u?t.key:void 0)),j("clickCol",{event:e,col:t,key:t.key})},q=(e,t)=>{v&&($?h.includes(t[y])?n(32,h=[]):n(32,h=[t[y]]):h.includes(t[y])?n(32,h=h.filter((e=>e!=t[y]))):n(32,h=[...h,t[y]].sort())),j("clickRow",{event:e,row:t})},z=(e,t)=>{t.$expanded=!t.$expanded;const l=t[y];g&&t.$expanded?n(31,p=[l]):g?n(31,p=[]):t.$expanded?n(31,p=[...p,l]):n(31,p=p.filter((e=>e!=l))),j("clickExpand",{event:e,row:t})},G=(e,t,n)=>{j("clickCell",{event:e,row:t,key:n})};return e.$$set=e=>{"columns"in e&&n(4,r=e.columns),"rows"in e&&n(33,c=e.rows),"c_rows"in e&&n(3,a=e.c_rows),"sortOrders"in e&&n(34,i=e.sortOrders),"sortBy"in e&&n(0,d=e.sortBy),"sortOrder"in e&&n(1,u=e.sortOrder),"filterSelections"in e&&n(2,f=e.filterSelections),"expanded"in e&&n(31,p=e.expanded),"selected"in e&&n(32,h=e.selected),"expandRowKey"in e&&n(35,m=e.expandRowKey),"rowKey"in e&&n(36,y=e.rowKey),"expandSingle"in e&&n(37,g=e.expandSingle),"selectSingle"in e&&n(38,$=e.selectSingle),"selectOnClick"in e&&n(5,v=e.selectOnClick),"iconAsc"in e&&n(6,x=e.iconAsc),"iconDesc"in e&&n(7,w=e.iconDesc),"iconSortable"in e&&n(8,b=e.iconSortable),"iconExpand"in e&&n(9,N=e.iconExpand),"iconExpanded"in e&&n(10,k=e.iconExpanded),"showExpandIcon"in e&&n(11,E=e.showExpandIcon),"classNameTable"in e&&n(12,_=e.classNameTable),"classNameThead"in e&&n(13,C=e.classNameThead),"classNameTbody"in e&&n(14,O=e.classNameTbody),"classNameSelect"in e&&n(15,S=e.classNameSelect),"classNameInput"in e&&n(16,T=e.classNameInput),"classNameRow"in e&&n(17,V=e.classNameRow),"classNameCell"in e&&n(18,A=e.classNameCell),"classNameRowSelected"in e&&n(19,L=e.classNameRowSelected),"classNameRowExpanded"in e&&n(20,I=e.classNameRowExpanded),"classNameExpandedContent"in e&&n(21,K=e.classNameExpandedContent),"classNameCellExpand"in e&&n(22,B=e.classNameCellExpand),"$$scope"in e&&n(41,s=e.$$scope)},e.$$.update=()=>{if(16&e.$$.dirty[0]&&(n(40,P={}),r.forEach((e=>{n(40,P[e.key]=e,P)}))),2064&e.$$.dirty[0]&&n(24,l=(E?1:0)+r.length),1&e.$$.dirty[0]|512&e.$$.dirty[1]){let e=P[d];void 0!==e&&!0===e.sortable&&"function"==typeof e.value&&n(39,M=t=>e.value(t))}7&e.$$.dirty[0]|807&e.$$.dirty[1]&&n(3,a=c.filter((e=>Object.keys(f).every((t=>{let n=null;if(void 0===P[t])return!0;if(P[t]?.searchValue){if(""===f[t])return!0;1===P[t].searchValue.length?n=(P[t].searchValue(e)+"").toLocaleLowerCase().indexOf((f[t]+"").toLocaleLowerCase())>=0:2===P[t].searchValue.length&&(n=!!P[t].searchValue(e,f[t]+""))}else n=!1;let l=null;return l=n||(void 0===f[t]||(2===P[t].filterValue?.length?!!P[t].filterValue(e,f[t]):1===P[t].filterValue?.length?f[t]===P[t].filterValue(e):f[t]===P[t].value(e))),l})))).map((e=>Object.assign({},e,{$sortOn:M(e),$expanded:null!==y&&p.indexOf(e[y])>=0,$selected:null!==y&&h.indexOf(e[y])>=0}))).sort(((e,t)=>d?e.$sortOn>t.$sortOn?u:e.$sortOn{"function"==typeof e.filterOptions?n(23,D[e.key]=e.filterOptions(c),D):Array.isArray(e.filterOptions)&&n(23,D[e.key]=e.filterOptions.map((e=>({name:e,value:e}))),D)})))},[d,u,f,a,r,v,x,w,b,N,k,E,_,C,O,S,T,V,A,L,I,K,B,D,l,H,e=>[].concat(e).filter((e=>null!==e&&"string"==typeof e&&""!==e)).join(" "),F,q,z,G,p,h,c,i,m,y,g,$,M,P,s,o,function(e){f[e.key]=this.value,n(2,f),n(23,D),n(4,r)},function(e){f[e.key]=function(e){const t=e.querySelector(":checked");return t&&t.__value}(this),n(2,f),n(23,D),n(4,r)},(e,t)=>F(t,e),(e,t)=>"Enter"===t.key&&F(t,e),(e,t,n)=>G(n,e,t.key),(e,t,n)=>"Enter"===n.key&&G(n,e,t.key),(e,t)=>z(t,e),(e,t)=>"Enter"===t.key&&z(t,e),(e,t)=>q(t,e),(e,t)=>"Enter"===t.key&&q(t,e)]}return class extends class{$destroy(){X(this,1),this.$destroy=e}$on(t,n){if(!s(n))return e;const l=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return l.push(n),()=>{const e=l.indexOf(n);-1!==e&&l.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}{constructor(e){super(),Z(this,e,Se,Oe,r,{columns:4,rows:33,c_rows:3,sortOrders:34,sortBy:0,sortOrder:1,filterSelections:2,expanded:31,selected:32,expandRowKey:35,rowKey:36,expandSingle:37,selectSingle:38,selectOnClick:5,iconAsc:6,iconDesc:7,iconSortable:8,iconExpand:9,iconExpanded:10,showExpandIcon:11,classNameTable:12,classNameThead:13,classNameTbody:14,classNameSelect:15,classNameInput:16,classNameRow:17,classNameCell:18,classNameRowSelected:19,classNameRowExpanded:20,classNameExpandedContent:21,classNameCellExpand:22},ee,[-1,-1,-1])}}})); 2 | //# sourceMappingURL=SvelteTable.js.map 3 | -------------------------------------------------------------------------------- /docs/SvelteTableIIFE.js: -------------------------------------------------------------------------------- 1 | var SvelteTable=function(){"use strict";function e(){}function t(e,t){for(const n in t)e[n]=t[n];return e}function n(e){return e()}function o(){return Object.create(null)}function l(e){e.forEach(n)}function c(e){return"function"==typeof e}function s(e,t){return e!=e?t==t:e!==t||e&&"object"==typeof e||"function"==typeof e}function r(e,t,n,o){if(e){const l=a(e,t,n,o);return e[0](l)}}function a(e,n,o,l){return e[1]&&l?t(o.ctx.slice(),e[1](l(n))):o.ctx}function i(e,t,n,o){if(e[2]&&o){const l=e[2](o(n));if(void 0===t.dirty)return l;if("object"==typeof l){const e=[],n=Math.max(t.dirty.length,l.length);for(let o=0;o32){const t=[],n=e.ctx.length/32;for(let e=0;ee.removeEventListener(t,n,o)}function N(e,t,n){null==n?e.removeAttribute(t):e.getAttribute(t)!==n&&e.setAttribute(t,n)}function k(e,t){t=""+t,e.wholeText!==t&&(e.data=t)}function E(e,t){e.value=null==t?"":t}function _(e,t){for(let n=0;n{const o=e.$$.callbacks[t];if(o){const l=function(e,t,n=!1){const o=document.createEvent("CustomEvent");return o.initCustomEvent(e,n,!1,t),o}(t,n);o.slice().forEach((t=>{t.call(e,l)}))}}}const R=[],A=[],B=[],V=[],j=Promise.resolve();let L=!1;function D(e){B.push(e)}let I=!1;const K=new Set;function M(){if(!I){I=!0;do{for(let e=0;e{z.delete(e),o&&(n&&e.d(1),o())})),e.o(t)}}function Q(e){e&&e.c()}function U(e,t,o,s){const{fragment:r,on_mount:a,on_destroy:i,after_update:u}=e.$$;r&&r.m(t,o),s||D((()=>{const t=a.map(n).filter(c);i?i.push(...t):l(t),e.$$.on_mount=[]})),u.forEach(D)}function W(e,t){const n=e.$$;null!==n.fragment&&(l(n.on_destroy),n.fragment&&n.fragment.d(t),n.on_destroy=n.fragment=null,n.ctx=[])}function X(e,t){-1===e.$$.dirty[0]&&(R.push(e),L||(L=!0,j.then(M)),e.$$.dirty.fill(0)),e.$$.dirty[t/31|0]|=1<{const l=o.length?o[0]:n;return f.ctx&&r(f.ctx[e],f.ctx[e]=l)&&(!f.skip_bound&&f.bound[e]&&f.bound[e](l),p&&X(t,e)),n})):[],f.update(),p=!0,l(f.before_update),f.fragment=!!s&&s(f.ctx),n.target){if(n.hydrate){const e=function(e){return Array.from(e.childNodes)}(n.target);f.fragment&&f.fragment.l(e),e.forEach($)}else f.fragment&&f.fragment.c();n.intro&&G(t.$$.fragment),U(t,n.target,n.anchor,n.customElement),M()}S(d)}function Z(e){m(e,"svelte-dsaf7t","table.svelte-dsaf7t.svelte-dsaf7t{width:100%}.isSortable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}.isClickable.svelte-dsaf7t.svelte-dsaf7t{cursor:pointer}tr.svelte-dsaf7t th select.svelte-dsaf7t{width:100%}")}function ee(e,t,n){const o=e.slice();return o[44]=t[n],o[46]=n,o}const te=e=>({row:524288&e[0]}),ne=e=>({row:e[44],n:e[46]});function oe(e,t,n){const o=e.slice();return o[47]=t[n],o}const le=e=>({row:524288&e[0]}),ce=e=>({row:e[44],n:e[46]});function se(e,t,n){const o=e.slice();return o[47]=t[n],o}const re=e=>({sortOrder:2&e[0],sortBy:1&e[0]}),ae=e=>({sortOrder:e[1],sortBy:e[0]});function ie(e,t,n){const o=e.slice();return o[47]=t[n],o[52]=t,o[53]=n,o}function ue(e,t,n){const o=e.slice();return o[54]=t[n],o}function de(e){let t,n,o,l,c,s=e[18][e[47].key],r=[];for(let t=0;t{W(e,1)})),P()}s?(n=new s(r()),Q(n.$$.fragment),G(n.$$.fragment,1),U(n,o.parentNode,o)):n=null}else s&&n.$set(l)},i(e){l||(n&&G(n.$$.fragment,e),l=!0)},o(e){n&&J(n.$$.fragment,e),l=!1},d(e){e&&$(o),n&&W(n,e)}}}function we(e){let t,n,o,l,c,s,r;const a=[xe,ve],i=[];function u(e,t){return e[47].renderComponent?0:1}function d(...t){return e[38](e[44],e[47],...t)}return n=u(e),o=i[n]=a[n](e),{c(){t=y("td"),o.c(),N(t,"class",l=f(e[22]([e[47].class,e[14]]))+" svelte-dsaf7t")},m(e,o){h(e,t,o),i[n].m(t,null),c=!0,s||(r=b(t,"click",d),s=!0)},p(s,r){let d=n;n=u(e=s),n===d?i[n].p(e,r):(H(),J(i[d],1,1,(()=>{i[d]=null})),P(),o=i[n],o?o.p(e,r):(o=i[n]=a[n](e),o.c()),G(o,1),o.m(t,null)),(!c||278536&r[0]&&l!==(l=f(e[22]([e[47].class,e[14]]))+" svelte-dsaf7t"))&&N(t,"class",l)},i(e){c||(G(o),c=!0)},o(e){J(o),c=!1},d(e){e&&$(t),i[n].d(),s=!1,r()}}}function be(e){let t,n,o,l,c,s=(e[44].$expanded?e[6]:e[7])+"";function r(...t){return e[39](e[44],...t)}return{c(){t=y("td"),n=v(s),N(t,"class",o=f(e[22](["isClickable",e[17]]))+" svelte-dsaf7t")},m(e,o){h(e,t,o),p(t,n),l||(c=b(t,"click",r),l=!0)},p(l,c){e=l,524480&c[0]&&s!==(s=(e[44].$expanded?e[6]:e[7])+"")&&k(n,s),131072&c[0]&&o!==(o=f(e[22](["isClickable",e[17]]))+" svelte-dsaf7t")&&N(t,"class",o)},d(e){e&&$(t),l=!1,c()}}}function Ne(e){let t,n,o,l;const c=e[34].expanded,s=r(c,e,e[33],ne);return{c(){t=y("tr"),n=y("td"),s&&s.c(),N(n,"colspan",e[20]),N(t,"class",o=f(e[22](e[16]))+" svelte-dsaf7t")},m(e,o){h(e,t,o),p(t,n),s&&s.m(n,null),l=!0},p(e,r){s&&s.p&&(!l||524288&r[0]|4&r[1])&&u(s,c,e,e[33],l?i(c,e[33],r,te):d(e[33]),ne),(!l||1048576&r[0])&&N(n,"colspan",e[20]),(!l||65536&r[0]&&o!==(o=f(e[22](e[16]))+" svelte-dsaf7t"))&&N(t,"class",o)},i(e){l||(G(s,e),l=!0)},o(e){J(s,e),l=!1},d(e){e&&$(t),s&&s.d(e)}}}function ke(e){let t;const n=e[34].row,o=r(n,e,e[33],ce),l=o||function(e){let t,n,o,l,c,s,r,a,i=e[3],u=[];for(let t=0;tJ(u[e],1,1,(()=>{u[e]=null}));let m=e[8]&&be(e);function v(...t){return e[40](e[44],...t)}let w=e[44].$expanded&&Ne(e);return{c(){t=y("tr");for(let e=0;e{w=null})),P())},i(e){if(!s){for(let e=0;eJ(C[e],1,1,(()=>{C[e]=null}));return{c(){t=y("table"),n=y("thead"),w&&w.c(),o=x(),E&&E.c(),c=x(),s=y("tbody");for(let e=0;e"";if(!Array.isArray(f))throw"'expanded' needs to be an array";let A,B=r.some((e=>void 0!==e.filterOptions||void 0!==e.searchValue)),V={};const j=(e,t)=>{var o;t.sortable&&(o=t.key,n(1,u=o===i&&1===u?-1:1),n(0,i=t.key)),S("clickCol",{event:e,col:t,key:t.key})},L=(e,t)=>{S("clickRow",{event:e,row:t})},D=(e,t)=>{t.$expanded=!t.$expanded;const o=t[p];m&&t.$expanded?n(27,f=[o]):m?n(27,f=[]):t.$expanded?n(27,f=[...f,o]):n(27,f=f.filter((e=>e!=o))),S("clickExpand",{event:e,row:t})},I=(e,t,n)=>{S("clickCell",{event:e,row:t,key:n})};return e.$$set=e=>{"columns"in e&&n(3,r=e.columns),"rows"in e&&n(28,a=e.rows),"sortBy"in e&&n(0,i=e.sortBy),"sortOrder"in e&&n(1,u=e.sortOrder),"filterSelections"in e&&n(2,d=e.filterSelections),"expanded"in e&&n(27,f=e.expanded),"expandRowKey"in e&&n(29,p=e.expandRowKey),"expandSingle"in e&&n(30,m=e.expandSingle),"iconAsc"in e&&n(4,h=e.iconAsc),"iconDesc"in e&&n(5,$=e.iconDesc),"iconExpand"in e&&n(6,g=e.iconExpand),"iconExpanded"in e&&n(7,y=e.iconExpanded),"showExpandIcon"in e&&n(8,v=e.showExpandIcon),"classNameTable"in e&&n(9,x=e.classNameTable),"classNameThead"in e&&n(10,w=e.classNameThead),"classNameTbody"in e&&n(11,b=e.classNameTbody),"classNameSelect"in e&&n(12,N=e.classNameSelect),"classNameRow"in e&&n(13,k=e.classNameRow),"classNameCell"in e&&n(14,E=e.classNameCell),"classNameRowExpanded"in e&&n(15,_=e.classNameRowExpanded),"classNameExpandedContent"in e&&n(16,C=e.classNameExpandedContent),"classNameCellExpand"in e&&n(17,O=e.classNameCellExpand),"$$scope"in e&&n(33,s=e.$$scope)},e.$$.update=()=>{if(8&e.$$.dirty[0]&&(n(32,A={}),r.forEach((e=>{n(32,A[e.key]=e,A)}))),264&e.$$.dirty[0]&&n(20,o=(v?1:0)+r.length),1&e.$$.dirty[0]|2&e.$$.dirty[1]){let e=A[i];void 0!==e&&!0===e.sortable&&"function"==typeof e.value&&n(31,R=t=>e.value(t))}939524102&e.$$.dirty[0]|3&e.$$.dirty[1]&&n(19,l=a.filter((e=>Object.keys(d).every((t=>""===d[t]||A[t].searchValue&&(A[t].searchValue(e)+"").toLocaleLowerCase().indexOf((d[t]+"").toLocaleLowerCase())>=0||void 0===d[t]||d[t]===("function"==typeof A[t].filterValue?A[t].filterValue(e):A[t].value(e)))))).map((e=>Object.assign({},e,{$sortOn:R(e),$expanded:null!==p&&f.indexOf(e[p])>=0}))).sort(((e,t)=>e.$sortOn>t.$sortOn?u:e.$sortOn{"function"==typeof e.filterOptions?n(18,V[e.key]=e.filterOptions(a),V):Array.isArray(e.filterOptions)&&n(18,V[e.key]=e.filterOptions.map((e=>({name:e,value:e}))),V)})))},[i,u,d,r,h,$,g,y,v,x,w,b,N,k,E,_,C,O,V,l,o,B,e=>[].concat(e).filter((e=>"string"==typeof e&&""!==e)).join(" "),j,L,D,I,f,a,p,m,R,A,s,c,function(e){d[e.key]=this.value,n(2,d),n(3,r),n(18,V)},function(e){d[e.key]=function(e){const t=e.querySelector(":checked")||e.options[0];return t&&t.__value}(this),n(2,d),n(3,r),n(18,V)},(e,t)=>j(t,e),(e,t,n)=>{I(n,e,t.key)},(e,t)=>D(t,e),(e,t)=>{L(t,e)}]}return class extends class{$destroy(){W(this,1),this.$destroy=e}$on(e,t){const n=this.$$.callbacks[e]||(this.$$.callbacks[e]=[]);return n.push(t),()=>{const e=n.indexOf(t);-1!==e&&n.splice(e,1)}}$set(e){var t;this.$$set&&(t=e,0!==Object.keys(t).length)&&(this.$$.skip_bound=!0,this.$$set(e),this.$$.skip_bound=!1)}}{constructor(e){super(),Y(this,e,_e,Ee,s,{columns:3,rows:28,sortBy:0,sortOrder:1,filterSelections:2,expanded:27,expandRowKey:29,expandSingle:30,iconAsc:4,iconDesc:5,iconExpand:6,iconExpanded:7,showExpandIcon:8,classNameTable:9,classNameThead:10,classNameTbody:11,classNameSelect:12,classNameRow:13,classNameCell:14,classNameRowExpanded:15,classNameExpandedContent:16,classNameCellExpand:17},Z,[-1,-1])}}}(); 2 | -------------------------------------------------------------------------------- /docs/bundle.css: -------------------------------------------------------------------------------- 1 | div.svelte-1lnco2q .text-center { 2 | text-align: center; 3 | } 4 | div.svelte-1lnco2q .text-left { 5 | text-align: left; 6 | } 7 | table.svelte-5jx64d { 8 | width: 100%; 9 | } 10 | .isSortable.svelte-5jx64d { 11 | cursor: pointer; 12 | } 13 | tr.svelte-5jx64d th select.svelte-5jx64d { 14 | width: 100%; 15 | } 16 | -------------------------------------------------------------------------------- /docs/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | color: #333; 10 | margin: 0; 11 | padding: 8px; 12 | box-sizing: border-box; 13 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 14 | Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 15 | } 16 | 17 | a { 18 | color: rgb(0, 100, 200); 19 | text-decoration: none; 20 | } 21 | 22 | a:hover { 23 | text-decoration: underline; 24 | } 25 | 26 | a:visited { 27 | color: rgb(0, 80, 160); 28 | } 29 | 30 | label { 31 | display: block; 32 | } 33 | 34 | input, 35 | button, 36 | select, 37 | textarea { 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0.2em; 41 | margin: 0 0 0.2em 0; 42 | box-sizing: border-box; 43 | border: 1px solid #ccc; 44 | border-radius: 2px; 45 | } 46 | 47 | input:disabled { 48 | color: #ccc; 49 | } 50 | 51 | input[type="range"] { 52 | height: 0; 53 | } 54 | 55 | button { 56 | background-color: #f4f4f4; 57 | outline: none; 58 | } 59 | 60 | button:active { 61 | background-color: #ddd; 62 | } 63 | 64 | button:focus { 65 | border-color: #666; 66 | } 67 | -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte-table 8 | 9 | 10 | 11 | 15 | 16 | 17 | 18 | 19 | 20 |
21 | 129 | 130 | 131 | -------------------------------------------------------------------------------- /example/.gitignore: -------------------------------------------------------------------------------- 1 | package-lock.json 2 | public/bundle.* 3 | public/bundle 4 | public/iife -------------------------------------------------------------------------------- /example/Example1.svelte: -------------------------------------------------------------------------------- 1 | 130 | 131 | 132 | 133 | 141 | -------------------------------------------------------------------------------- /example/Example2.svelte: -------------------------------------------------------------------------------- 1 | 126 | 127 |
128 |

SvelteTable example 2

129 |

Custom header and row slots

130 | 138 | 139 | 147 | 148 | 156 | 157 | 166 | 175 | 176 | 185 | 188 | 189 | 190 | {refSortBy === "id" ? (refSortOrder > 0 ? iconAsc : iconDesc) : ""} ID 191 | 192 | 193 | {refSortBy === "first_name" 194 | ? refSortOrder > 0 195 | ? iconAsc 196 | : iconDesc 197 | : ""} 198 | FIRST NAME 199 | 200 | 201 | {refSortBy === "last_name" 202 | ? refSortOrder > 0 203 | ? iconAsc 204 | : iconDesc 205 | : ""} 206 | LAST NAME 207 | 208 | EMAIL 209 | IP ADDRESS 210 | 211 | 212 | 215 | 216 | {row.id} 217 | {row.first_name} 218 | {row.last_name} 219 | {row.email} 220 | {row.ip_address} 221 | 222 | 223 |
224 | 225 | 226 | -------------------------------------------------------------------------------- /example/Example3.svelte: -------------------------------------------------------------------------------- 1 | 155 | 156 |
157 |

SvelteTable example 3

158 | 159 |

160 | 161 |

162 | 171 | 172 | 181 | 182 | 191 | 192 | 211 | 212 | 222 | 223 | 233 |
234 | 235 |
236 |
237 | 241 |
242 |
243 | 247 |
248 |
249 | 250 | { 261 | console.log("clickCol:", e); 262 | }} 263 | on:clickRow={e => { 264 | console.log("clickRow:", e); 265 | }} 266 | on:clickCell={e => { 267 | console.log("clickCell:", e); 268 | }} 269 | /> 270 | {selectedCols} 271 |
272 | 273 | 287 | -------------------------------------------------------------------------------- /example/Example4.svelte: -------------------------------------------------------------------------------- 1 | 96 | 97 |
98 |

SvelteTable example4

99 |
100 | 103 | 104 | 105 | 115 | 125 |
126 | 127 |
128 | 137 |
138 |
139 | -------------------------------------------------------------------------------- /example/Example5.svelte: -------------------------------------------------------------------------------- 1 | 96 | 97 |
98 |
99 |

100 | This search example uses searchValue for both first and last name 101 | fields 102 |

103 |

104 | The first name field uses a single parameter searchValue 105 | function which returns a string. The search logic is handled 106 | by SvelteTable. 107 | 108 | This functionality will likely be deprecated in the future. 109 | 110 |

111 |

112 | The last name field uses a two parameters searchValue 113 | function which returns a boolean. This allows more 114 | flexibility in the search behaviour. 115 |

116 |
117 |
118 | 119 |
120 | 121 | 128 | 135 | 142 | 149 | 155 |
156 | 157 | 163 | 164 | 172 | -------------------------------------------------------------------------------- /example/Example6.svelte: -------------------------------------------------------------------------------- 1 | 80 | 81 | 82 | 83 | 91 | -------------------------------------------------------------------------------- /example/Example7.svelte: -------------------------------------------------------------------------------- 1 | 116 | 117 |
118 |

SvelteTable example 7 ~ expand and select

119 | 120 |

Expand row example 1

121 | 122 |

123 | Uses manual override of selected row ids through input or clicking on row 124 |

125 | 126 |
127 | 128 |
129 | 130 |
131 | 146 | 147 | {row.county}, {row.state}
148 | {row.country} 149 | 150 | 151 |
152 | 153 |
154 |

Expand row example 2

155 | 156 |

157 | Only 1 row can be expanded at a time
158 | Console logs selection change 159 |

160 | 161 | 171 |
172 | {row.county}, {row.state}
173 | {row.country} 174 |
175 | 176 |
177 | 178 |
179 |

Expand row example 3

180 | 181 |

uses name as key and custom expand/collapse icons

182 | 183 | Using first_name as keys: 184 | 
{expanded3.join(", ")}
185 | 197 | 198 | {row.county}, {row.state}
199 | {row.country} 200 | 201 | 202 |
203 | 204 |
205 |

Selection

206 | 207 |
208 | 211 | 217 |
218 | 219 | 
Selection: [{selectionMultiple.join(", ")}]
220 | 221 | Using first_name as keys: 222 | 233 |
234 | 235 |
236 |

Selection

237 | 238 | 
Selection: [{selectionSingle.join(", ")}]
239 | 240 | Using first_name as keys: 241 | 252 |
253 |
254 | 255 | 268 | -------------------------------------------------------------------------------- /example/Example8.svelte: -------------------------------------------------------------------------------- 1 | 100 | 101 |
102 |

SvelteTable example 8 ~ dynamic column classes

103 | 104 |
105 | 112 |
113 |
114 | 115 |
116 |

SvelteTable example 8 ~ dynamic row class

117 | 118 |
119 | 126 |
127 |
128 | 129 | 138 | -------------------------------------------------------------------------------- /example/README.md: -------------------------------------------------------------------------------- 1 | # Examples 2 | 3 | run `npm run examples` to build and serve the examples folder 4 | 5 | Example app is served on http://localhost:5000 6 | -------------------------------------------------------------------------------- /example/example1.js: -------------------------------------------------------------------------------- 1 | import Example1 from "./Example1.svelte"; 2 | 3 | const example1 = new Example1({ 4 | target: document.body, 5 | props: { 6 | name: "svelte-table example", 7 | }, 8 | }); 9 | 10 | export default example1; 11 | -------------------------------------------------------------------------------- /example/example2.js: -------------------------------------------------------------------------------- 1 | import Example2 from "./Example2.svelte"; 2 | 3 | const example2 = new Example2({ 4 | target: document.body, 5 | props: { 6 | name: "svelte-table example", 7 | }, 8 | }); 9 | 10 | export default example2; 11 | -------------------------------------------------------------------------------- /example/example3.js: -------------------------------------------------------------------------------- 1 | import Example3 from "./Example3.svelte"; 2 | 3 | const example3 = new Example3({ 4 | target: document.body, 5 | props: { 6 | name: "svelte-table example", 7 | }, 8 | }); 9 | 10 | export default example3; 11 | -------------------------------------------------------------------------------- /example/example4.js: -------------------------------------------------------------------------------- 1 | import Example4 from "./Example4.svelte"; 2 | 3 | const example4 = new Example4({ 4 | target: document.body, 5 | props: { 6 | name: "svelte-table example", 7 | }, 8 | }); 9 | 10 | export default example4; 11 | -------------------------------------------------------------------------------- /example/example5.js: -------------------------------------------------------------------------------- 1 | import Example5 from "./Example5.svelte"; 2 | 3 | export default new Example5({ 4 | target: document.body, 5 | props: { 6 | name: "svelte-table example", 7 | }, 8 | }); 9 | -------------------------------------------------------------------------------- /example/example6.js: -------------------------------------------------------------------------------- 1 | import Example6 from "./Example6.svelte"; 2 | 3 | const example6 = new Example6({ 4 | target: document.body, 5 | props: { 6 | name: "svelte-table example", 7 | }, 8 | }); 9 | 10 | export default example6; 11 | -------------------------------------------------------------------------------- /example/example6/ContactButtonComponent.svelte: -------------------------------------------------------------------------------- 1 | 7 | 8 | 11 | -------------------------------------------------------------------------------- /example/example6/HelpButtonComponent.svelte: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /example/example7.ts: -------------------------------------------------------------------------------- 1 | import Example from "./Example7.svelte"; 2 | 3 | const example = new Example({ 4 | target: document.body, 5 | props: {}, 6 | }); 7 | 8 | export default example; 9 | -------------------------------------------------------------------------------- /example/example8.ts: -------------------------------------------------------------------------------- 1 | import Example from "./Example8.svelte"; 2 | 3 | const example = new Example({ 4 | target: document.body, 5 | props: {}, 6 | }); 7 | 8 | export default example; 9 | -------------------------------------------------------------------------------- /example/helper.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Create filter array from rows 3 | * @param {string} key row key 4 | * @returns {function} 5 | */ 6 | export const generateFilter = key => rows => { 7 | let values = {}; 8 | rows.forEach(row => { 9 | let val = row[key]; 10 | if (values[val] === undefined) 11 | values[val] = { 12 | name: `${val}`, 13 | value: val, 14 | }; 15 | }); 16 | // fix order 17 | values = Object.entries(values) 18 | .sort() 19 | .reduce((o, [k, v]) => ((o[k] = v), o), {}); 20 | return Object.values(values); 21 | }; 22 | -------------------------------------------------------------------------------- /example/public/example1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/public/example2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 15 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | -------------------------------------------------------------------------------- /example/public/example3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /example/public/example4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/public/example5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/public/example6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 16 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | -------------------------------------------------------------------------------- /example/public/example7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 16 | 21 | 22 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | -------------------------------------------------------------------------------- /example/public/global.css: -------------------------------------------------------------------------------- 1 | html, 2 | body { 3 | position: relative; 4 | width: 100%; 5 | height: 100%; 6 | } 7 | 8 | body { 9 | color: #333; 10 | margin: 0; 11 | padding: 8px; 12 | box-sizing: border-box; 13 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 14 | Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; 15 | } 16 | 17 | a { 18 | color: rgb(0, 100, 200); 19 | text-decoration: none; 20 | } 21 | 22 | a:hover { 23 | text-decoration: underline; 24 | } 25 | 26 | a:visited { 27 | color: rgb(0, 80, 160); 28 | } 29 | 30 | label { 31 | display: block; 32 | } 33 | 34 | input, 35 | button, 36 | select, 37 | textarea { 38 | font-family: inherit; 39 | font-size: inherit; 40 | padding: 0.2em; 41 | margin: 0 0 0.2em 0; 42 | box-sizing: border-box; 43 | border: 1px solid #ccc; 44 | border-radius: 2px; 45 | } 46 | 47 | input:disabled { 48 | color: #ccc; 49 | } 50 | 51 | input[type="range"] { 52 | height: 0; 53 | } 54 | 55 | button { 56 | background-color: #f4f4f4; 57 | outline: none; 58 | } 59 | 60 | button:active { 61 | background-color: #ddd; 62 | } 63 | 64 | button:focus { 65 | border-color: #666; 66 | } 67 | -------------------------------------------------------------------------------- /example/public/iife_example.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 120 | 121 | 122 | -------------------------------------------------------------------------------- /example/public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Svelte app 8 | 9 | 13 | 14 | 15 | 16 | 38 | 39 | 40 | -------------------------------------------------------------------------------- /example/rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from "rollup-plugin-svelte"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import autoPreprocess from "svelte-preprocess"; 4 | 5 | const CONFIG = { 6 | input: "", 7 | output: { 8 | sourcemap: true, 9 | format: "iife", 10 | name: "app", 11 | dir: "example/public/bundle", 12 | globals: { faker: "faker" }, 13 | }, 14 | external: ["faker"], 15 | plugins: [ 16 | svelte({ 17 | emitCss: false, 18 | preprocess: autoPreprocess(), 19 | }), 20 | resolve({ 21 | jsnext: true, 22 | main: true, 23 | browser: true, 24 | }), 25 | // commonjs(), 26 | ], 27 | }; 28 | 29 | export default [ 30 | { ...CONFIG, input: "./example/example1.js" }, 31 | { ...CONFIG, input: "./example/example2.js" }, 32 | { ...CONFIG, input: "./example/example3.js" }, 33 | { ...CONFIG, input: "./example/example4.js" }, 34 | { ...CONFIG, input: "./example/example5.js" }, 35 | { ...CONFIG, input: "./example/example6.js" }, 36 | { ...CONFIG, input: "./example/example7.ts" }, 37 | { ...CONFIG, input: "./example/example8.ts" }, 38 | ]; 39 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-table", 3 | "version": "0.6.4", 4 | "license": "MIT", 5 | "repository": "dasDaniel/svelte-table", 6 | "module": "dist/es/SvelteTable.mjs", 7 | "main": "dist/umd/SvelteTable.js", 8 | "svelte": "src/SvelteTable.svelte", 9 | "exports": { 10 | ".": { 11 | "types": "./src/types.d.ts", 12 | "svelte": "./src/SvelteTable.svelte" 13 | } 14 | }, 15 | "types": "src/types.d.ts", 16 | "scripts": { 17 | "build": "rollup -c", 18 | "dev": "rollup -c -w", 19 | "prepublishOnly": "npm run build", 20 | "format": "prettier --write --plugin-search-dir=. .", 21 | "lint": "prettier --check --plugin-search-dir=. .", 22 | "examples": "run-p examples:build examples:serve", 23 | "examples:build": "rollup -c example/rollup.config.js -w", 24 | "examples:serve": "sirv example/public --dev" 25 | }, 26 | "devDependencies": { 27 | "@rollup/plugin-node-resolve": "^13.0.0", 28 | "@tsconfig/svelte": "^3.0.0", 29 | "npm-run-all": "^4.1.5", 30 | "prettier": "^2.4.1", 31 | "prettier-plugin-svelte": "^2.4.0", 32 | "rollup": "^2.0.0", 33 | "rollup-plugin-svelte": "^7.1.0", 34 | "rollup-plugin-terser": "^7.0.2", 35 | "sirv-cli": "^1.0.0", 36 | "svelte": "3.57.0", 37 | "svelte-preprocess": "^4.10.7" 38 | }, 39 | "keywords": [ 40 | "table", 41 | "svelte", 42 | "svelte3" 43 | ] 44 | } 45 | -------------------------------------------------------------------------------- /rollup.config.js: -------------------------------------------------------------------------------- 1 | import svelte from "rollup-plugin-svelte"; 2 | import resolve from "@rollup/plugin-node-resolve"; 3 | import { terser } from "rollup-plugin-terser"; 4 | import pkg from "./package.json"; 5 | import autoPreprocess from "svelte-preprocess"; 6 | // import typescript from "@rollup/plugin-typescript"; 7 | 8 | const minify = !process.env.MINIFY; 9 | const input = "src/index.js"; 10 | const name = "SvelteTable"; 11 | 12 | const plugins = [ 13 | svelte({ 14 | emitCss: false, 15 | preprocess: autoPreprocess(), 16 | }), 17 | // typescript({ sourceMap: true }), 18 | resolve(), 19 | // commonjs(), 20 | minify && terser(), 21 | ]; 22 | 23 | export default [ 24 | { 25 | input, 26 | output: { 27 | sourcemap: true, 28 | exports: "default", 29 | format: "cjs", 30 | name, 31 | file: "dist/cjs/SvelteTable.js", 32 | }, 33 | plugins, 34 | }, 35 | { 36 | input, 37 | output: { 38 | sourcemap: true, 39 | format: "es", 40 | name, 41 | file: pkg.module, 42 | }, 43 | plugins, 44 | }, 45 | { 46 | input, 47 | output: { 48 | sourcemap: true, 49 | format: "umd", 50 | name, 51 | file: pkg.main, 52 | }, 53 | plugins, 54 | }, 55 | { 56 | input, 57 | output: { 58 | sourcemap: true, 59 | format: "iife", 60 | name, 61 | file: "dist/iife/SvelteTable.js", 62 | }, 63 | plugins, 64 | }, 65 | ]; 66 | -------------------------------------------------------------------------------- /src/SvelteTable.svelte: -------------------------------------------------------------------------------- 1 | 311 | 312 | 313 | 314 | {#if showFilterHeader} 315 | 316 | {#each columns as col} 317 | 336 | {/each} 337 | {#if showExpandIcon} 338 | 341 | {/if} 342 | 343 | 344 | {#each columns as col} 345 | 361 | {/each} 362 | {#if showExpandIcon} 363 | 366 | 367 | 368 | 369 | 370 | {#each c_rows as row, n} 371 | 372 | handleClickRow(e, row)} 374 | on:keypress={e => e.key === "Enter" && handleClickRow(e, row)} 375 | class={asStringArray([ 376 | typeof classNameRow === "string" ? classNameRow : null, 377 | typeof classNameRow === "function" ? classNameRow(row, n) : null, 378 | row.$expanded && classNameRowExpanded, 379 | row.$selected && classNameRowSelected, 380 | ])} 381 | tabIndex={selectOnClick ? "0" : null} 382 | > 383 | {#each columns as col, colIndex} 384 | 413 | {/each} 414 | {#if showExpandIcon} 415 | 427 | {/if} 428 | 429 | {#if row.$expanded} 430 | 435 | {/if} 436 | 437 | {/each} 438 | 439 |
318 | {#if !col.hideFilterHeader && col.searchValue !== undefined} 319 | 324 | {:else if !col.hideFilterHeader && filterValues[col.key] !== undefined} 325 | 334 | {/if} 335 | 339 | {/if} 340 |
handleClickCol(e, col)} 347 | on:keypress={e => e.key === "Enter" && handleClickCol(e, col)} 348 | class={asStringArray([ 349 | col.sortable ? "isSortable" : "", 350 | col.headerClass, 351 | ])} 352 | tabindex="0" 353 | > 354 | {col.title} 355 | {#if sortBy === col.key} 356 | {@html sortOrder === 1 ? iconAsc : iconDesc} 357 | {:else if col.sortable} 358 | {@html iconSortable} 359 | {/if} 360 | 364 | {/if} 365 |
handleClickCell(e, row, col.key)} 386 | on:keypress={e => 387 | e.key === "Enter" && handleClickCell(e, row, col.key)} 388 | class={asStringArray([ 389 | typeof col.class === "string" ? col.class : null, 390 | typeof col.class === "function" 391 | ? col.class(row, n, colIndex) 392 | : null, 393 | classNameCell, 394 | ])} 395 | > 396 | {#if col.renderComponent} 397 | 403 | {:else if col.parseHTML} 404 | {@html col.renderValue 405 | ? col.renderValue(row, n, colIndex) 406 | : col.value(row, n, colIndex)} 407 | {:else} 408 | {col.renderValue 409 | ? col.renderValue(row, n, colIndex) 410 | : col.value(row, n, colIndex)} 411 | {/if} 412 | 416 | handleClickExpand(e, row)} 419 | on:keypress={e => 420 | e.key === "Enter" && handleClickExpand(e, row)} 421 | tabindex="0" 422 | role="button" 423 | > 424 | {@html row.$expanded ? iconExpand : iconExpanded} 425 | 426 |
432 | 433 |
440 | 441 | 457 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | export { default as default } from "./SvelteTable.svelte"; 2 | -------------------------------------------------------------------------------- /src/svelte.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /src/types.d.ts: -------------------------------------------------------------------------------- 1 | import { SvelteComponentTyped } from "svelte"; 2 | 3 | export type TableColumn = { 4 | key: string | number; 5 | title: string; 6 | value?: (row: T, rowIndex?: number, colIndex?: number) => string | number; 7 | class?: 8 | | string 9 | | ((row: T, rowIndex?: number, colIndex?: number) => string | null); 10 | sortable?: boolean; 11 | searchValue?: 12 | | ((row: T, searchTerm?: string) => boolean) 13 | | ((row: T) => string | number); 14 | filterOptions?: ((rows: T[]) => any) | any[]; 15 | filterValue?: 16 | | ((row: T, filterSelection?: any) => boolean) 17 | | ((row: T) => string); 18 | filterPlaceholder?: string; 19 | headerClass?: string; 20 | headerFilterClass?: string; 21 | renderValue?: (row: T, rowIndex?: number, colIndex?: number) => any; 22 | parseHTML?: boolean; 23 | renderComponent?: any; // svelte component 24 | hideFilterHeader?: boolean; 25 | }; 26 | 27 | export type TableColumns = TableColumn[]; 28 | 29 | export type RowClassName = null | string | ((T, rowIndex) => string | null); 30 | 31 | export type ColumnFilterValue = { 32 | name: string | number; 33 | value: T; 34 | }; 35 | 36 | export default class SvelteTable extends SvelteComponentTyped< 37 | { 38 | columns: TableColumn[]; 39 | rows: Row[]; 40 | 41 | // c_rows?: any; internal 42 | sortBy?: string | number; 43 | sortOrder?: 1 | -1 | 0; 44 | sortOrders?: (1 | -1 | 0)[]; 45 | filterSelections?: Record; 46 | expanded?: (string | number)[]; 47 | selected?: (string | number)[]; 48 | iconAsc?: string; 49 | iconDesc?: string; 50 | iconFilterable?: string; 51 | iconExpand?: string; 52 | iconExpanded?: string; 53 | iconSortable?: string; 54 | expandRowKey?: string; 55 | rowKey?: string; 56 | classNameTable?: string | string[]; 57 | classNameThead?: string | string[]; 58 | classNameTbody?: string | string[]; 59 | classNameSelect?: string | string[]; 60 | classNameInput?: string | string[]; 61 | classNameRowExpanded?: string | string[]; 62 | classNameExpandedContent?: string | string[]; 63 | classNameRowSelected?: string | string[]; 64 | classNameCell?: string | string[]; 65 | classNameCellExpand?: string | string[]; 66 | classNameRow?: string | ((row: Row, rowIndex?: number) => string | null); 67 | expandSingle?: Boolean; 68 | selectSingle?: Boolean; 69 | selectOnClick?: Boolean; 70 | showExpandIcon?: Boolean; 71 | }, 72 | { 73 | clickCol: CustomEvent<{ 74 | event: PointerEvent; 75 | col: TableColumn; 76 | key: string | number; 77 | }>; 78 | clickCell: CustomEvent<{ 79 | event: PointerEvent; 80 | row: Row; 81 | key: string | number; 82 | }>; 83 | clickRow: CustomEvent<{ event: PointerEvent; row: Row }>; 84 | clickExpand: CustomEvent<{ event: PointerEvent; row: Row }>; 85 | } 86 | > {} 87 | --------------------------------------------------------------------------------