@genesislcap/grid-tabulator 14.343.1-alpha-758d886.0 → 14.343.1-patch.1

package/dist/custom-elements.json

@@ -3212,552 +3212,154 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/cell-formatters/action.formatter.ts",
+      "path": "src/datasource/client-side.datasource.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "actionFormatter",
-          "return": {
-            "type": {
-              "text": ""
-            }
+          "kind": "variable",
+          "name": "criteriaDelimiter",
+          "type": {
+            "text": "string"
           },
-          "parameters": [
+          "default": "';'",
+          "description": "Delimiter for criteria in the datasource"
+        },
+        {
+          "kind": "variable",
+          "name": "criteriaJoin",
+          "type": {
+            "text": "string"
+          },
+          "default": "' && '",
+          "description": "Join operator for criteria in the datasource"
+        },
+        {
+          "kind": "class",
+          "description": "The Genesis Datasource element, for client-side data fetching and used exclusively by the GridTabulator element.",
+          "name": "GridTabulatorClientSideDatasource",
+          "members": [
             {
-              "name": "cell",
+              "kind": "field",
+              "name": "auth",
               "type": {
-                "text": "any"
-              },
-              "description": "The cell component provided by Tabulator"
+                "text": "Auth"
+              }
             },
             {
-              "name": "formatterParams",
-              "default": "{}",
+              "kind": "field",
+              "name": "connect",
               "type": {
-                "text": "ActionFormatterParams<T>"
-              },
-              "description": "Action formatter parameters"
-            }
-          ],
-          "description": "Formatter that displays an action button in the cell.\nStyled to match grid-pro action renderer.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "actionFormatter",
-          "declaration": {
-            "name": "actionFormatter",
-            "module": "src/cell-formatters/action.formatter.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/cell-formatters/actions-menu.formatter.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "actionsMenuFormatter",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+                "text": "Connect"
+              }
+            },
             {
-              "name": "cell",
+              "kind": "field",
+              "name": "datasource",
               "type": {
-                "text": "any"
-              },
-              "description": "The cell component provided by Tabulator"
+                "text": "Datasource"
+              }
             },
             {
-              "name": "formatterParams",
-              "default": "{}",
+              "kind": "field",
+              "name": "deferredGridOptions",
               "type": {
-                "text": "ActionsMenuFormatterParams<T>"
+                "text": "Options"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "deferredColumnStates",
+              "type": {
+                "text": "any[]"
               },
-              "description": "Actions menu formatter parameters"
-            }
-          ],
-          "description": "Formatter that displays a dropdown menu of actions in the cell.\nStyled to match grid-pro actions-menu renderer.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "actionsMenuFormatter",
-          "declaration": {
-            "name": "actionsMenuFormatter",
-            "module": "src/cell-formatters/actions-menu.formatter.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/cell-formatters/boolean.formatter.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "booleanFormatter",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+              "default": "[]",
+              "description": "Allows storing column layouts between datasource initializations"
+            },
             {
-              "name": "cell",
+              "kind": "field",
+              "name": "criteria",
               "type": {
-                "text": "any"
+                "text": "string"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "criteriaChanged",
+              "parameters": [
+                {
+                  "name": "oldCriteria",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "newCriteria",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "fields",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isSnapshot",
+              "type": {
+                "text": "boolean"
               },
-              "description": "The cell component provided by Tabulator"
+              "default": "false"
             },
             {
-              "name": "formatterParams",
-              "default": "{}",
+              "kind": "field",
+              "name": "maxRows",
               "type": {
-                "text": "BooleanFormatterParams<T>"
+                "text": "number"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "maxView",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "pollingInterval",
+              "type": {
+                "text": "number"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "movingView",
+              "type": {
+                "text": "boolean"
               },
-              "description": "Boolean formatter parameters"
-            }
-          ],
-          "description": "Formatter that displays boolean values using a checkbox component.\nStyled to match grid-pro boolean renderer.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "booleanFormatter",
-          "declaration": {
-            "name": "booleanFormatter",
-            "module": "src/cell-formatters/boolean.formatter.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/cell-formatters/constants.ts",
-      "declarations": [],
-      "exports": []
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/cell-formatters/editable.formatter.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "editableFormatter",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
+              "default": "false"
+            },
             {
-              "name": "cell",
+              "kind": "field",
+              "name": "orderBy",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "request",
               "type": {
                 "text": "any"
-              },
-              "description": "The cell component provided by Tabulator"
+              }
             },
             {
-              "name": "formatterParams",
-              "default": "{}",
-              "type": {
-                "text": "EditableFormatterParams<T>"
-              },
-              "description": "Editable formatter parameters"
-            }
-          ],
-          "description": "Formatter that displays an editable cell with validation state",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "editableFormatter",
-          "declaration": {
-            "name": "editableFormatter",
-            "module": "src/cell-formatters/editable.formatter.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/cell-formatters/index.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "formatters",
-          "type": {
-            "text": "object"
-          },
-          "default": "{\n  action: actionFormatter,\n  actionsMenu: actionsMenuFormatter,\n  boolean: booleanFormatter,\n  editable: editableFormatter,\n  select: selectFormatter,\n  text: textFormatter,\n}",
-          "description": "Zero formatters for Tabulator grid"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "*",
-          "declaration": {
-            "name": "*",
-            "package": "./constants"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ActionFormatterParams",
-          "declaration": {
-            "name": "ActionFormatterParams",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "actionFormatter",
-          "declaration": {
-            "name": "actionFormatter",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ActionsMenuFormatterParams",
-          "declaration": {
-            "name": "ActionsMenuFormatterParams",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "actionsMenuFormatter",
-          "declaration": {
-            "name": "actionsMenuFormatter",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "BooleanFormatterParams",
-          "declaration": {
-            "name": "BooleanFormatterParams",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "booleanFormatter",
-          "declaration": {
-            "name": "booleanFormatter",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "EditableFormatterParams",
-          "declaration": {
-            "name": "EditableFormatterParams",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "editableFormatter",
-          "declaration": {
-            "name": "editableFormatter",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "SelectFormatterParams",
-          "declaration": {
-            "name": "SelectFormatterParams",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "selectFormatter",
-          "declaration": {
-            "name": "selectFormatter",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "TextFormatterParams",
-          "declaration": {
-            "name": "TextFormatterParams",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "textFormatter",
-          "declaration": {
-            "name": "textFormatter",
-            "module": "src/cell-formatters/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "formatters",
-          "declaration": {
-            "name": "formatters",
-            "module": "src/cell-formatters/index.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/cell-formatters/select.formatter.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "selectFormatter",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
-            {
-              "name": "cell",
-              "type": {
-                "text": "any"
-              },
-              "description": "The cell component provided by Tabulator"
-            },
-            {
-              "name": "formatterParams",
-              "type": {
-                "text": "SelectFormatterParams<T>"
-              },
-              "description": "Select formatter parameters"
-            }
-          ],
-          "description": "Formatter that displays a select component with options.\nReturns a wrapped div containing the select, similar to boolean.formatter.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "selectFormatter",
-          "declaration": {
-            "name": "selectFormatter",
-            "module": "src/cell-formatters/select.formatter.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/cell-formatters/text.formatter.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "textFormatter",
-          "return": {
-            "type": {
-              "text": ""
-            }
-          },
-          "parameters": [
-            {
-              "name": "cell",
-              "type": {
-                "text": "any"
-              },
-              "description": "The cell component provided by Tabulator"
-            },
-            {
-              "name": "formatterParams",
-              "default": "{}",
-              "type": {
-                "text": "TextFormatterParams<T>"
-              },
-              "description": "Text formatter parameters"
-            }
-          ],
-          "description": "Text formatter for customized display of values.\nStyled to match grid-pro text renderer.",
-          "privacy": "public"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "textFormatter",
-          "declaration": {
-            "name": "textFormatter",
-            "module": "src/cell-formatters/text.formatter.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/datasource/client-side.datasource.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "criteriaDelimiter",
-          "type": {
-            "text": "string"
-          },
-          "default": "';'",
-          "description": "Delimiter for criteria in the datasource"
-        },
-        {
-          "kind": "variable",
-          "name": "criteriaJoin",
-          "type": {
-            "text": "string"
-          },
-          "default": "' && '",
-          "description": "Join operator for criteria in the datasource"
-        },
-        {
-          "kind": "class",
-          "description": "The Genesis Datasource element, for client-side data fetching and used exclusively by the GridTabulator element.",
-          "name": "GridTabulatorClientSideDatasource",
-          "members": [
-            {
-              "kind": "field",
-              "name": "auth",
-              "type": {
-                "text": "Auth"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "connect",
-              "type": {
-                "text": "Connect"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "datasource",
-              "type": {
-                "text": "Datasource"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "deferredGridOptions",
-              "type": {
-                "text": "Options"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "deferredColumnStates",
-              "type": {
-                "text": "any[]"
-              },
-              "default": "[]",
-              "description": "Allows storing column layouts between datasource initializations"
-            },
-            {
-              "kind": "field",
-              "name": "criteria",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "criteriaChanged",
-              "parameters": [
-                {
-                  "name": "oldCriteria",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "newCriteria",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "fields",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isSnapshot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "maxRows",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "maxView",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "pollingInterval",
-              "type": {
-                "text": "number"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "movingView",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "orderBy",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "request",
-              "type": {
-                "text": "any"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "resourceName",
+              "kind": "field",
+              "name": "resourceName",
               "type": {
                 "text": "string"
               }
@@ -4363,284 +3965,682 @@
                 "module": "src/foundation-element/foundation-element.ts"
               }
             }
-          ],
-          "attributes": [
-            {
-              "name": "criteria",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "criteria"
-            },
-            {
-              "name": "fields",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "fields"
-            },
-            {
-              "name": "is-snapshot",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "isSnapshot"
-            },
-            {
-              "name": "max-rows",
-              "type": {
-                "text": "number"
-              },
-              "fieldName": "maxRows"
-            },
-            {
-              "name": "max-view",
-              "type": {
-                "text": "number"
-              },
-              "fieldName": "maxView"
-            },
-            {
-              "name": "polling-interval",
-              "type": {
-                "text": "number"
-              },
-              "fieldName": "pollingInterval"
-            },
+          ],
+          "attributes": [
+            {
+              "name": "criteria",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "criteria"
+            },
+            {
+              "name": "fields",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "fields"
+            },
+            {
+              "name": "is-snapshot",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "isSnapshot"
+            },
+            {
+              "name": "max-rows",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "maxRows"
+            },
+            {
+              "name": "max-view",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "maxView"
+            },
+            {
+              "name": "polling-interval",
+              "type": {
+                "text": "number"
+              },
+              "fieldName": "pollingInterval"
+            },
+            {
+              "name": "moving-view",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "movingView"
+            },
+            {
+              "name": "order-by",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "orderBy"
+            },
+            {
+              "name": "resource-name",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "resourceName"
+            },
+            {
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "reverse"
+            },
+            {
+              "name": "row-id",
+              "description": "Attribute to set an unique identifier for the row.\n\nDefaults to `ROW_REF` or `RECORD_ID` depending on the resource type.",
+              "fieldName": "rowIdAttr"
+            },
+            {
+              "name": "restart-on-reconnection",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "true",
+              "fieldName": "restartOnReconnection"
+            },
+            {
+              "name": "keep-col-defs-on-clear-row-data",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Whether to keep column definitions when clearing row data",
+              "fieldName": "keepColDefsOnClearRowData"
+            }
+          ],
+          "mixins": [
+            {
+              "name": "LifecycleMixin",
+              "package": "@genesislcap/foundation-utils"
+            },
+            {
+              "name": "DatasourceEventHandler",
+              "package": "@genesislcap/foundation-comms"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          },
+          "tagName": "grid-tabulator-client-side-datasource",
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "criteriaDelimiter",
+          "declaration": {
+            "name": "criteriaDelimiter",
+            "module": "src/datasource/client-side.datasource.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "criteriaJoin",
+          "declaration": {
+            "name": "criteriaJoin",
+            "module": "src/datasource/client-side.datasource.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "GridTabulatorClientSideDatasource",
+          "declaration": {
+            "name": "GridTabulatorClientSideDatasource",
+            "module": "src/datasource/client-side.datasource.ts"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "grid-tabulator-client-side-datasource",
+          "declaration": {
+            "name": "GridTabulatorClientSideDatasource",
+            "module": "src/datasource/client-side.datasource.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/datasource/index.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "*",
+          "declaration": {
+            "name": "*",
+            "package": "./client-side.datasource"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/external/fonts.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "tabulatorDefaultFontFace",
+          "default": "`\n  @font-face {\n    font-family: \"defaultFontFace\";\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "tabulatorRapidFontFace",
+          "default": "`\n  @font-face {\n    font-family: \"rapidFontFace\";\n  }\n`"
+        },
+        {
+          "kind": "variable",
+          "name": "gridThemeFontFaceMap",
+          "type": {
+            "text": "GridThemeFontFaceMap"
+          },
+          "default": "{\n  [GridTabulatorTheme.default]: tabulatorDefaultFontFace,\n  [GridTabulatorTheme.rapid]: tabulatorRapidFontFace,\n}"
+        },
+        {
+          "kind": "variable",
+          "name": "defaultGridTabulatorFontFace",
+          "default": "tabulatorDefaultFontFace"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "tabulatorDefaultFontFace",
+          "declaration": {
+            "name": "tabulatorDefaultFontFace",
+            "module": "src/external/fonts.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tabulatorRapidFontFace",
+          "declaration": {
+            "name": "tabulatorRapidFontFace",
+            "module": "src/external/fonts.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "gridThemeFontFaceMap",
+          "declaration": {
+            "name": "gridThemeFontFaceMap",
+            "module": "src/external/fonts.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "defaultGridTabulatorFontFace",
+          "declaration": {
+            "name": "defaultGridTabulatorFontFace",
+            "module": "src/external/fonts.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/external/index.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "tabulatorExternalStockStyles",
+          "default": "css`\n  ${tabulatorThemeSimpleCSS}\n`",
+          "description": "External styles for the Tabulator grid.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "tabulatorExternalStockStyles",
+          "declaration": {
+            "name": "tabulatorExternalStockStyles",
+            "module": "src/external/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "tabulatorThemeSimpleCSS",
+          "declaration": {
+            "name": "tabulatorThemeSimpleCSS",
+            "module": "src/external/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/external/tabulator-theme-simple-css.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "tabulatorThemeSimpleCSS",
+          "default": "css`\n  .tabulator {\n    position: relative;\n    border: 1px solid #999;\n    background-color: #fff;\n    font-size: 14px;\n    text-align: left;\n    overflow: hidden;\n    -webkit-transform: translateZ(0);\n    -moz-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    -o-transform: translateZ(0);\n    transform: translateZ(0);\n  }\n\n  .tabulator[tabulator-layout='fitDataFill'] .tabulator-tableholder .tabulator-table {\n    min-width: 100%;\n  }\n\n  .tabulator[tabulator-layout='fitDataTable'] {\n    display: inline-block;\n  }\n\n  .tabulator.tabulator-block-select {\n    user-select: none;\n  }\n\n  .tabulator .tabulator-header {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    border-bottom: 1px solid #999;\n    background-color: #fff;\n    color: #555;\n    font-weight: bold;\n    white-space: nowrap;\n    overflow: hidden;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n  }\n\n  .tabulator .tabulator-header.tabulator-header-hidden {\n    display: none;\n  }\n\n  .tabulator .tabulator-header .tabulator-header-contents {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .tabulator .tabulator-header .tabulator-header-contents .tabulator-headers {\n    display: inline-block;\n  }\n\n  .tabulator .tabulator-header .tabulator-col {\n    display: inline-flex;\n    position: relative;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: flex-start;\n    border-right: 1px solid #ddd;\n    background: #fff;\n    text-align: left;\n    vertical-align: bottom;\n    overflow: hidden;\n  }\n\n  .tabulator .tabulator-header .tabulator-col.tabulator-moving {\n    position: absolute;\n    border: 1px solid #999;\n    background: #e6e6e6;\n    pointer-events: none;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content {\n    box-sizing: border-box;\n    position: relative;\n    padding: 4px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-header-popup-button {\n    padding: 0 8px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-header-popup-button:hover {\n    cursor: pointer;\n    opacity: 0.6;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder {\n    position: relative;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {\n    box-sizing: border-box;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: bottom;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-title.tabulator-col-title-wrap {\n    white-space: normal;\n    text-overflow: initial;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-title\n    .tabulator-title-editor {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid #999;\n    padding: 1px;\n    background: #fff;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-title\n    .tabulator-header-popup-button\n    + .tabulator-title-editor {\n    width: calc(100% - 22px);\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {\n    display: flex;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 4px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    width: 0;\n    height: 0;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-bottom: 6px solid #bbb;\n  }\n\n  .tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {\n    position: relative;\n    display: flex;\n    border-top: 1px solid #ddd;\n    overflow: hidden;\n    margin-right: -1px;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter {\n    position: relative;\n    box-sizing: border-box;\n    margin-top: 2px;\n    width: 100%;\n    text-align: center;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {\n    height: auto !important;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {\n    margin-top: 3px;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear {\n    width: 0;\n    height: 0;\n  }\n\n  .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {\n    padding-right: 25px;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {\n      cursor: pointer;\n      background-color: #e6e6e6;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='none']\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    color: #bbb;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable[aria-sort='none']\n      .tabulator-col-content\n      .tabulator-col-sorter.tabulator-col-sorter-element\n      .tabulator-arrow:hover {\n      cursor: pointer;\n      border-bottom: 6px solid #555;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='none']\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    border-top: none;\n    border-bottom: 6px solid #bbb;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='ascending']\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    color: #666;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable[aria-sort='ascending']\n      .tabulator-col-content\n      .tabulator-col-sorter.tabulator-col-sorter-element\n      .tabulator-arrow:hover {\n      cursor: pointer;\n      border-bottom: 6px solid #555;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='ascending']\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    border-top: none;\n    border-bottom: 6px solid #666;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='descending']\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    color: #666;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable[aria-sort='descending']\n      .tabulator-col-content\n      .tabulator-col-sorter.tabulator-col-sorter-element\n      .tabulator-arrow:hover {\n      cursor: pointer;\n      border-top: 6px solid #555;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='descending']\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    border-bottom: none;\n    border-top: 6px solid #666;\n    color: #666;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical\n    .tabulator-col-content\n    .tabulator-col-title {\n    writing-mode: vertical-rl;\n    text-orientation: mixed;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip\n    .tabulator-col-title {\n    transform: rotate(180deg);\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-sortable\n    .tabulator-col-title {\n    padding-right: 0;\n    padding-top: 20px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip\n    .tabulator-col-title {\n    padding-right: 0;\n    padding-bottom: 20px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-sortable\n    .tabulator-col-sorter {\n    justify-content: center;\n    left: 0;\n    right: 0;\n    top: 4px;\n    bottom: auto;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen {\n    position: sticky;\n    left: 0;\n    z-index: 11;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {\n    border-left: 2px solid #ddd;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder {\n    box-sizing: border-box;\n    background: white !important;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {\n    background: white !important;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {\n    display: none;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen-rows-holder:empty {\n    display: none;\n  }\n\n  .tabulator .tabulator-tableholder {\n    position: relative;\n    width: 100%;\n    white-space: nowrap;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .tabulator .tabulator-tableholder:focus {\n    outline: none;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode='virtual'] {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {\n    display: inline-block;\n    text-align: center;\n    padding: 10px;\n    color: #ccc;\n    font-weight: bold;\n    font-size: 20px;\n    white-space: normal;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-table {\n    position: relative;\n    display: inline-block;\n    white-space: nowrap;\n    overflow: visible;\n    color: #333;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs {\n    font-weight: bold;\n    background: #f2f2f2;\n  }\n\n  .tabulator\n    .tabulator-tableholder\n    .tabulator-table\n    .tabulator-row.tabulator-calcs.tabulator-calcs-top {\n    border-bottom: 2px solid #ddd;\n  }\n\n  .tabulator\n    .tabulator-tableholder\n    .tabulator-table\n    .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {\n    border-top: 2px solid #ddd;\n  }\n\n  .tabulator .tabulator-footer {\n    border-top: 1px solid #999;\n    background-color: #fff;\n    color: #555;\n    font-weight: bold;\n    white-space: nowrap;\n    user-select: none;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n  }\n\n  .tabulator .tabulator-footer .tabulator-footer-contents {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-footer-contents:empty {\n    display: none;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder {\n    box-sizing: border-box;\n    width: 100%;\n    text-align: left;\n    background: white !important;\n    border-bottom: 1px solid #ddd;\n    border-top: 1px solid #ddd;\n    overflow: hidden;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {\n    display: inline-block;\n    background: white !important;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {\n    display: none;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder:only-child {\n    margin-bottom: -5px;\n    border-bottom: none;\n  }\n\n  .tabulator .tabulator-footer > * + .tabulator-page-counter {\n    margin-left: 10px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page-counter {\n    font-weight: normal;\n  }\n\n  .tabulator .tabulator-footer .tabulator-paginator {\n    flex: 1;\n    text-align: right;\n    color: #555;\n    font-family: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page-size {\n    display: inline-block;\n    margin: 0 5px;\n    padding: 2px 5px;\n    border: 1px solid #aaa;\n    border-radius: 3px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-pages {\n    margin: 0 7px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page {\n    display: inline-block;\n    margin: 0 2px;\n    padding: 2px 5px;\n    border: 1px solid #aaa;\n    border-radius: 3px;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .tabulator .tabulator-footer .tabulator-page.active {\n    color: #d00;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page:disabled {\n    opacity: 0.5;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.2);\n      color: #fff;\n    }\n  }\n\n  .tabulator .tabulator-col-resize-handle {\n    position: relative;\n    display: inline-block;\n    width: 6px;\n    margin-left: -3px;\n    margin-right: -3px;\n    z-index: 10;\n    vertical-align: middle;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator .tabulator-col-resize-handle:hover {\n      cursor: ew-resize;\n    }\n  }\n\n  .tabulator .tabulator-col-resize-handle:last-of-type {\n    width: 3px;\n    margin-right: 0;\n  }\n\n  .tabulator .tabulator-alert {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    height: 100%;\n    width: 100%;\n    background: rgba(0, 0, 0, 0.4);\n    text-align: center;\n  }\n\n  .tabulator .tabulator-alert .tabulator-alert-msg {\n    display: inline-block;\n    margin: 0 auto;\n    padding: 10px 20px;\n    border-radius: 10px;\n    background: #fff;\n    font-weight: bold;\n    font-size: 16px;\n  }\n\n  .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {\n    border: 4px solid #333;\n    color: #000;\n  }\n\n  .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error {\n    border: 4px solid #d00;\n    color: #590000;\n  }\n\n  .tabulator-row {\n    position: relative;\n    box-sizing: border-box;\n    min-height: 22px;\n    background-color: #fff;\n  }\n\n  .tabulator-row.tabulator-row-even {\n    background-color: #fff;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row.tabulator-selectable:hover {\n      background-color: #bbb;\n      cursor: pointer;\n    }\n  }\n\n  .tabulator-row.tabulator-selected {\n    background-color: #9abcea;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row.tabulator-selected:hover {\n      background-color: #769bcc;\n      cursor: pointer;\n    }\n  }\n\n  .tabulator-row.tabulator-row-moving {\n    border: 1px solid #000;\n    background: #fff;\n  }\n\n  .tabulator-row.tabulator-moving {\n    position: absolute;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n    pointer-events: none;\n    z-index: 15;\n  }\n\n  .tabulator-row .tabulator-row-resize-handle {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 5px;\n  }\n\n  .tabulator-row .tabulator-row-resize-handle.prev {\n    top: 0;\n    bottom: auto;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row .tabulator-row-resize-handle:hover {\n      cursor: ns-resize;\n    }\n  }\n\n  .tabulator-row .tabulator-responsive-collapse {\n    box-sizing: border-box;\n    padding: 5px;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse:empty {\n    display: none;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse table {\n    font-size: 14px;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse table tr td {\n    position: relative;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse table tr td:first-of-type {\n    padding-right: 10px;\n  }\n\n  .tabulator-row .tabulator-cell {\n    display: inline-flex;\n    position: unset;\n    box-sizing: border-box;\n    padding: 4px 8px;\n    border-right: 1px solid #ddd;\n    vertical-align: middle;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-frozen {\n    display: inline-flex;\n    position: sticky;\n    left: 0;\n    background-color: inherit;\n    z-index: 11;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {\n    border-left: 2px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-editing {\n    border: 1px solid #1d68cd;\n    outline: none;\n    padding: 0;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-editing input,\n  .tabulator-row .tabulator-cell.tabulator-editing select {\n    border: 1px;\n    background: transparent;\n    outline: none;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-validation-fail {\n    border: 1px solid #dd0000;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-validation-fail input,\n  .tabulator-row .tabulator-cell.tabulator-validation-fail select {\n    border: 1px;\n    background: transparent;\n    color: #dd0000;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-row-handle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {\n    width: 80%;\n  }\n\n  .tabulator-row\n    .tabulator-cell.tabulator-row-handle\n    .tabulator-row-handle-box\n    .tabulator-row-handle-bar {\n    width: 100%;\n    height: 3px;\n    margin-top: 2px;\n    background: #666;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty {\n    display: inline-block;\n    width: 7px;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-branch {\n    display: inline-block;\n    vertical-align: middle;\n    height: 9px;\n    width: 7px;\n    margin-top: -9px;\n    margin-right: 5px;\n    border-bottom-left-radius: 1px;\n    border-left: 2px solid #ddd;\n    border-bottom: 2px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-control {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    height: 11px;\n    width: 11px;\n    margin-right: 5px;\n    border: 1px solid #333;\n    border-radius: 2px;\n    background: rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row .tabulator-cell .tabulator-data-tree-control:hover {\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.2);\n    }\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-data-tree-control\n    .tabulator-data-tree-control-collapse {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: transparent;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-data-tree-control\n    .tabulator-data-tree-control-collapse:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: #333;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-data-tree-control\n    .tabulator-data-tree-control-expand:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n    height: 15px;\n    width: 15px;\n    border-radius: 20px;\n    background: #666;\n    color: #fff;\n    font-weight: bold;\n    font-size: 1.1em;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover {\n      opacity: 0.7;\n      cursor: pointer;\n    }\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-responsive-collapse-toggle.open\n    .tabulator-responsive-collapse-toggle-close {\n    display: initial;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-responsive-collapse-toggle.open\n    .tabulator-responsive-collapse-toggle-open {\n    display: none;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg {\n    stroke: #fff;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-responsive-collapse-toggle\n    .tabulator-responsive-collapse-toggle-close {\n    display: none;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-traffic-light {\n    display: inline-block;\n    height: 14px;\n    width: 14px;\n    border-radius: 14px;\n  }\n\n  .tabulator-row.tabulator-group {\n    box-sizing: border-box;\n    border-bottom: 1px solid #999;\n    border-right: 1px solid #ddd;\n    border-top: 1px solid #999;\n    padding: 5px;\n    padding-left: 10px;\n    background: #ccc;\n    font-weight: bold;\n    min-width: 100%;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row.tabulator-group:hover {\n      cursor: pointer;\n      background-color: rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {\n    margin-right: 10px;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid #666;\n    border-bottom: 0;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-1 {\n    padding-left: 30px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-2 {\n    padding-left: 50px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-3 {\n    padding-left: 70px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-4 {\n    padding-left: 90px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-5 {\n    padding-left: 110px;\n  }\n\n  .tabulator-row.tabulator-group .tabulator-group-toggle {\n    display: inline-block;\n  }\n\n  .tabulator-row.tabulator-group .tabulator-arrow {\n    display: inline-block;\n    width: 0;\n    height: 0;\n    margin-right: 16px;\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-right: 0;\n    border-left: 6px solid #666;\n    vertical-align: middle;\n  }\n\n  .tabulator-row.tabulator-group span {\n    margin-left: 10px;\n    color: #d00;\n  }\n\n  .tabulator-popup-container {\n    position: absolute;\n    display: inline-block;\n    box-sizing: border-box;\n    background: #fff;\n    border: 1px solid #ddd;\n    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);\n    font-size: 14px;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    z-index: 10000;\n  }\n\n  .tabulator-popup {\n    padding: 5px;\n    border-radius: 3px;\n  }\n\n  .tabulator-tooltip {\n    max-width: Min(500px, 100%);\n    padding: 3px 5px;\n    border-radius: 2px;\n    box-shadow: none;\n    font-size: 12px;\n    pointer-events: none;\n  }\n\n  .tabulator-menu .tabulator-menu-item {\n    position: relative;\n    box-sizing: border-box;\n    padding: 5px 10px;\n    user-select: none;\n  }\n\n  .tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled {\n    opacity: 0.5;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {\n      cursor: pointer;\n      background: #fff;\n    }\n  }\n\n  .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu {\n    padding-right: 25px;\n  }\n\n  .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after {\n    display: inline-block;\n    position: absolute;\n    top: calc(5px + 0.4em);\n    right: 10px;\n    height: 7px;\n    width: 7px;\n    content: '';\n    border-width: 1px 1px 0 0;\n    border-style: solid;\n    border-color: #ddd;\n    vertical-align: top;\n    transform: rotate(45deg);\n  }\n\n  .tabulator-menu .tabulator-menu-separator {\n    border-top: 1px solid #ddd;\n  }\n\n  .tabulator-edit-list {\n    max-height: 200px;\n    font-size: 14px;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item {\n    padding: 4px;\n    color: #333;\n    outline: none;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.active {\n    color: #fff;\n    background: #1d68cd;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.active.focused {\n    outline: 1px solid rgba(255, 255, 255, 0.5);\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.focused {\n    outline: 1px solid #1d68cd;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-edit-list .tabulator-edit-list-item:hover {\n      cursor: pointer;\n      color: #fff;\n      background: #1d68cd;\n    }\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-placeholder {\n    padding: 4px;\n    color: #333;\n    text-align: center;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-group {\n    border-bottom: 1px solid #ddd;\n    padding: 4px;\n    padding-top: 6px;\n    color: #333;\n    font-weight: bold;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2 {\n    padding-left: 12px;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3 {\n    padding-left: 20px;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4 {\n    padding-left: 28px;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5 {\n    padding-left: 36px;\n  }\n\n  .tabulator.tabulator-ltr {\n    direction: ltr;\n  }\n\n  .tabulator.tabulator-rtl {\n    text-align: initial;\n    direction: rtl;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-header .tabulator-col {\n    text-align: initial;\n    border-left: 1px solid #ddd;\n    border-right: initial;\n  }\n\n  .tabulator.tabulator-rtl\n    .tabulator-header\n    .tabulator-col.tabulator-col-group\n    .tabulator-col-group-cols {\n    margin-right: initial;\n    margin-left: -1px;\n  }\n\n  .tabulator.tabulator-rtl\n    .tabulator-header\n    .tabulator-col.tabulator-sortable\n    .tabulator-col-title {\n    padding-right: 0;\n    padding-left: 25px;\n  }\n\n  .tabulator.tabulator-rtl\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    left: 8px;\n    right: initial;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell {\n    border-right: initial;\n    border-left: 1px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch {\n    margin-right: initial;\n    margin-left: 5px;\n    border-bottom-left-radius: initial;\n    border-bottom-right-radius: 1px;\n    border-left: initial;\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control {\n    margin-right: initial;\n    margin-left: 5px;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {\n    border-left: 2px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type {\n    width: 3px;\n    margin-left: 0;\n    margin-right: -3px;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder {\n    text-align: initial;\n  }\n\n  .tabulator-print-fullscreen {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 10000;\n  }\n\n  body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {\n    display: none !important;\n  }\n\n  .tabulator-print-table {\n    border-collapse: collapse;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-branch {\n    display: inline-block;\n    vertical-align: middle;\n    height: 9px;\n    width: 7px;\n    margin-top: -9px;\n    margin-right: 5px;\n    border-bottom-left-radius: 1px;\n    border-left: 2px solid #ddd;\n    border-bottom: 2px solid #ddd;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group {\n    box-sizing: border-box;\n    border-bottom: 1px solid #999;\n    border-right: 1px solid #ddd;\n    border-top: 1px solid #999;\n    padding: 5px;\n    padding-left: 10px;\n    background: #ccc;\n    font-weight: bold;\n    min-width: 100%;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-print-table .tabulator-print-table-group:hover {\n      cursor: pointer;\n      background-color: rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow {\n    margin-right: 10px;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid #666;\n    border-bottom: 0;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td {\n    padding-left: 30px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td {\n    padding-left: 50px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td {\n    padding-left: 70px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td {\n    padding-left: 90px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td {\n    padding-left: 110px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle {\n    display: inline-block;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group .tabulator-arrow {\n    display: inline-block;\n    width: 0;\n    height: 0;\n    margin-right: 16px;\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-right: 0;\n    border-left: 6px solid #666;\n    vertical-align: middle;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group span {\n    margin-left: 10px;\n    color: #d00;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    height: 11px;\n    width: 11px;\n    margin-right: 5px;\n    border: 1px solid #333;\n    border-radius: 2px;\n    background: rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-print-table .tabulator-data-tree-control:hover {\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.2);\n    }\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: transparent;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: #333;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator {\n    border: none;\n    background-color: #fff;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder {\n    background: #f2f2f2 !important;\n    border-bottom: 1px solid #999;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {\n    background: #f2f2f2 !important;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder span {\n    color: #000;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder {\n    background: #f2f2f2 !important;\n    border-bottom: 1px solid #fff;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {\n    background: #f2f2f2 !important;\n  }\n\n  .tabulator-row {\n    border-bottom: 1px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell:last-of-type {\n    border-right: none;\n  }\n\n  .tabulator-row.tabulator-group span {\n    color: #666;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group span {\n    margin-left: 10px;\n    color: #666;\n  }\n\n  /*# sourceMappingURL=tabulator_simple.css.map */\n`",
+          "description": "External styles for the Tabulator grid.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "tabulatorThemeSimpleCSS",
+          "declaration": {
+            "name": "tabulatorThemeSimpleCSS",
+            "module": "src/external/tabulator-theme-simple-css.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/cell-formatters/action.formatter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "actionFormatter",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
             {
-              "name": "moving-view",
+              "name": "cell",
               "type": {
-                "text": "boolean"
+                "text": "any"
               },
-              "default": "false",
-              "fieldName": "movingView"
+              "description": "The cell component provided by Tabulator"
             },
             {
-              "name": "order-by",
+              "name": "formatterParams",
+              "default": "{}",
               "type": {
-                "text": "string"
+                "text": "ActionFormatterParams<T>"
               },
-              "fieldName": "orderBy"
-            },
+              "description": "Action formatter parameters"
+            }
+          ],
+          "description": "Formatter that displays an action button in the cell.\nStyled to match grid-pro action renderer.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "actionFormatter",
+          "declaration": {
+            "name": "actionFormatter",
+            "module": "src/cell-formatters/action.formatter.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/cell-formatters/actions-menu.formatter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "actionsMenuFormatter",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
             {
-              "name": "resource-name",
+              "name": "cell",
               "type": {
-                "text": "string"
+                "text": "any"
               },
-              "fieldName": "resourceName"
+              "description": "The cell component provided by Tabulator"
             },
             {
+              "name": "formatterParams",
+              "default": "{}",
               "type": {
-                "text": "boolean"
+                "text": "ActionsMenuFormatterParams<T>"
               },
-              "default": "false",
-              "fieldName": "reverse"
-            },
-            {
-              "name": "row-id",
-              "description": "Attribute to set an unique identifier for the row.\n\nDefaults to `ROW_REF` or `RECORD_ID` depending on the resource type.",
-              "fieldName": "rowIdAttr"
-            },
+              "description": "Actions menu formatter parameters"
+            }
+          ],
+          "description": "Formatter that displays a dropdown menu of actions in the cell.\nStyled to match grid-pro actions-menu renderer.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "actionsMenuFormatter",
+          "declaration": {
+            "name": "actionsMenuFormatter",
+            "module": "src/cell-formatters/actions-menu.formatter.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/cell-formatters/boolean.formatter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "booleanFormatter",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
             {
-              "name": "restart-on-reconnection",
+              "name": "cell",
               "type": {
-                "text": "boolean"
+                "text": "any"
               },
-              "default": "true",
-              "fieldName": "restartOnReconnection"
+              "description": "The cell component provided by Tabulator"
             },
             {
-              "name": "keep-col-defs-on-clear-row-data",
+              "name": "formatterParams",
+              "default": "{}",
               "type": {
-                "text": "boolean"
+                "text": "BooleanFormatterParams<T>"
               },
-              "default": "false",
-              "description": "Whether to keep column definitions when clearing row data",
-              "fieldName": "keepColDefsOnClearRowData"
+              "description": "Boolean formatter parameters"
+            }
+          ],
+          "description": "Formatter that displays boolean values using a checkbox component.\nStyled to match grid-pro boolean renderer.",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "booleanFormatter",
+          "declaration": {
+            "name": "booleanFormatter",
+            "module": "src/cell-formatters/boolean.formatter.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/cell-formatters/constants.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/cell-formatters/editable.formatter.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "editableFormatter",
+          "return": {
+            "type": {
+              "text": ""
             }
-          ],
-          "mixins": [
+          },
+          "parameters": [
             {
-              "name": "LifecycleMixin",
-              "package": "@genesislcap/foundation-utils"
+              "name": "cell",
+              "type": {
+                "text": "any"
+              },
+              "description": "The cell component provided by Tabulator"
             },
             {
-              "name": "DatasourceEventHandler",
-              "package": "@genesislcap/foundation-comms"
+              "name": "formatterParams",
+              "default": "{}",
+              "type": {
+                "text": "EditableFormatterParams<T>"
+              },
+              "description": "Editable formatter parameters"
             }
           ],
-          "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+          "description": "Formatter that displays an editable cell with validation state",
+          "privacy": "public"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "editableFormatter",
+          "declaration": {
+            "name": "editableFormatter",
+            "module": "src/cell-formatters/editable.formatter.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/cell-formatters/index.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "formatters",
+          "type": {
+            "text": "object"
           },
-          "tagName": "grid-tabulator-client-side-datasource",
-          "customElement": true
+          "default": "{\n  action: actionFormatter,\n  actionsMenu: actionsMenuFormatter,\n  boolean: booleanFormatter,\n  editable: editableFormatter,\n  select: selectFormatter,\n  text: textFormatter,\n}",
+          "description": "Zero formatters for Tabulator grid"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "criteriaDelimiter",
+          "name": "*",
           "declaration": {
-            "name": "criteriaDelimiter",
-            "module": "src/datasource/client-side.datasource.ts"
+            "name": "*",
+            "package": "./constants"
           }
         },
         {
           "kind": "js",
-          "name": "criteriaJoin",
+          "name": "ActionFormatterParams",
           "declaration": {
-            "name": "criteriaJoin",
-            "module": "src/datasource/client-side.datasource.ts"
+            "name": "ActionFormatterParams",
+            "module": "src/cell-formatters/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "GridTabulatorClientSideDatasource",
+          "name": "actionFormatter",
           "declaration": {
-            "name": "GridTabulatorClientSideDatasource",
-            "module": "src/datasource/client-side.datasource.ts"
+            "name": "actionFormatter",
+            "module": "src/cell-formatters/index.ts"
           }
         },
         {
-          "kind": "custom-element-definition",
-          "name": "grid-tabulator-client-side-datasource",
+          "kind": "js",
+          "name": "ActionsMenuFormatterParams",
           "declaration": {
-            "name": "GridTabulatorClientSideDatasource",
-            "module": "src/datasource/client-side.datasource.ts"
+            "name": "ActionsMenuFormatterParams",
+            "module": "src/cell-formatters/index.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/datasource/index.ts",
-      "declarations": [],
-      "exports": [
+        },
         {
           "kind": "js",
-          "name": "*",
+          "name": "actionsMenuFormatter",
           "declaration": {
-            "name": "*",
-            "package": "./client-side.datasource"
+            "name": "actionsMenuFormatter",
+            "module": "src/cell-formatters/index.ts"
           }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/external/fonts.ts",
-      "declarations": [
+        },
         {
-          "kind": "variable",
-          "name": "tabulatorDefaultFontFace",
-          "default": "`\n  @font-face {\n    font-family: \"defaultFontFace\";\n  }\n`"
+          "kind": "js",
+          "name": "BooleanFormatterParams",
+          "declaration": {
+            "name": "BooleanFormatterParams",
+            "module": "src/cell-formatters/index.ts"
+          }
         },
         {
-          "kind": "variable",
-          "name": "tabulatorRapidFontFace",
-          "default": "`\n  @font-face {\n    font-family: \"rapidFontFace\";\n  }\n`"
+          "kind": "js",
+          "name": "booleanFormatter",
+          "declaration": {
+            "name": "booleanFormatter",
+            "module": "src/cell-formatters/index.ts"
+          }
         },
         {
-          "kind": "variable",
-          "name": "gridThemeFontFaceMap",
-          "type": {
-            "text": "GridThemeFontFaceMap"
-          },
-          "default": "{\n  [GridTabulatorTheme.default]: tabulatorDefaultFontFace,\n  [GridTabulatorTheme.rapid]: tabulatorRapidFontFace,\n}"
+          "kind": "js",
+          "name": "EditableFormatterParams",
+          "declaration": {
+            "name": "EditableFormatterParams",
+            "module": "src/cell-formatters/index.ts"
+          }
         },
         {
-          "kind": "variable",
-          "name": "defaultGridTabulatorFontFace",
-          "default": "tabulatorDefaultFontFace"
-        }
-      ],
-      "exports": [
+          "kind": "js",
+          "name": "editableFormatter",
+          "declaration": {
+            "name": "editableFormatter",
+            "module": "src/cell-formatters/index.ts"
+          }
+        },
         {
           "kind": "js",
-          "name": "tabulatorDefaultFontFace",
+          "name": "SelectFormatterParams",
           "declaration": {
-            "name": "tabulatorDefaultFontFace",
-            "module": "src/external/fonts.ts"
+            "name": "SelectFormatterParams",
+            "module": "src/cell-formatters/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "tabulatorRapidFontFace",
+          "name": "selectFormatter",
           "declaration": {
-            "name": "tabulatorRapidFontFace",
-            "module": "src/external/fonts.ts"
+            "name": "selectFormatter",
+            "module": "src/cell-formatters/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "gridThemeFontFaceMap",
+          "name": "TextFormatterParams",
           "declaration": {
-            "name": "gridThemeFontFaceMap",
-            "module": "src/external/fonts.ts"
+            "name": "TextFormatterParams",
+            "module": "src/cell-formatters/index.ts"
           }
         },
         {
           "kind": "js",
-          "name": "defaultGridTabulatorFontFace",
+          "name": "textFormatter",
           "declaration": {
-            "name": "defaultGridTabulatorFontFace",
-            "module": "src/external/fonts.ts"
+            "name": "textFormatter",
+            "module": "src/cell-formatters/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "formatters",
+          "declaration": {
+            "name": "formatters",
+            "module": "src/cell-formatters/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/external/index.ts",
+      "path": "src/cell-formatters/select.formatter.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "tabulatorExternalStockStyles",
-          "default": "css`\n  ${tabulatorThemeSimpleCSS}\n`",
-          "description": "External styles for the Tabulator grid.",
+          "kind": "function",
+          "name": "selectFormatter",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "cell",
+              "type": {
+                "text": "any"
+              },
+              "description": "The cell component provided by Tabulator"
+            },
+            {
+              "name": "formatterParams",
+              "type": {
+                "text": "SelectFormatterParams<T>"
+              },
+              "description": "Select formatter parameters"
+            }
+          ],
+          "description": "Formatter that displays a select component with options.\nReturns a wrapped div containing the select, similar to boolean.formatter.",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "tabulatorExternalStockStyles",
-          "declaration": {
-            "name": "tabulatorExternalStockStyles",
-            "module": "src/external/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "tabulatorThemeSimpleCSS",
+          "name": "selectFormatter",
           "declaration": {
-            "name": "tabulatorThemeSimpleCSS",
-            "module": "src/external/index.ts"
+            "name": "selectFormatter",
+            "module": "src/cell-formatters/select.formatter.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/external/tabulator-theme-simple-css.ts",
+      "path": "src/cell-formatters/text.formatter.ts",
       "declarations": [
         {
-          "kind": "variable",
-          "name": "tabulatorThemeSimpleCSS",
-          "default": "css`\n  .tabulator {\n    position: relative;\n    border: 1px solid #999;\n    background-color: #fff;\n    font-size: 14px;\n    text-align: left;\n    overflow: hidden;\n    -webkit-transform: translateZ(0);\n    -moz-transform: translateZ(0);\n    -ms-transform: translateZ(0);\n    -o-transform: translateZ(0);\n    transform: translateZ(0);\n  }\n\n  .tabulator[tabulator-layout='fitDataFill'] .tabulator-tableholder .tabulator-table {\n    min-width: 100%;\n  }\n\n  .tabulator[tabulator-layout='fitDataTable'] {\n    display: inline-block;\n  }\n\n  .tabulator.tabulator-block-select {\n    user-select: none;\n  }\n\n  .tabulator .tabulator-header {\n    position: relative;\n    box-sizing: border-box;\n    width: 100%;\n    border-bottom: 1px solid #999;\n    background-color: #fff;\n    color: #555;\n    font-weight: bold;\n    white-space: nowrap;\n    overflow: hidden;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n  }\n\n  .tabulator .tabulator-header.tabulator-header-hidden {\n    display: none;\n  }\n\n  .tabulator .tabulator-header .tabulator-header-contents {\n    position: relative;\n    overflow: hidden;\n  }\n\n  .tabulator .tabulator-header .tabulator-header-contents .tabulator-headers {\n    display: inline-block;\n  }\n\n  .tabulator .tabulator-header .tabulator-col {\n    display: inline-flex;\n    position: relative;\n    box-sizing: border-box;\n    flex-direction: column;\n    justify-content: flex-start;\n    border-right: 1px solid #ddd;\n    background: #fff;\n    text-align: left;\n    vertical-align: bottom;\n    overflow: hidden;\n  }\n\n  .tabulator .tabulator-header .tabulator-col.tabulator-moving {\n    position: absolute;\n    border: 1px solid #999;\n    background: #e6e6e6;\n    pointer-events: none;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content {\n    box-sizing: border-box;\n    position: relative;\n    padding: 4px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-header-popup-button {\n    padding: 0 8px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-header-popup-button:hover {\n    cursor: pointer;\n    opacity: 0.6;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title-holder {\n    position: relative;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-title {\n    box-sizing: border-box;\n    width: 100%;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    vertical-align: bottom;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-title.tabulator-col-title-wrap {\n    white-space: normal;\n    text-overflow: initial;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-title\n    .tabulator-title-editor {\n    box-sizing: border-box;\n    width: 100%;\n    border: 1px solid #999;\n    padding: 1px;\n    background: #fff;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-title\n    .tabulator-header-popup-button\n    + .tabulator-title-editor {\n    width: calc(100% - 22px);\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-col-content .tabulator-col-sorter {\n    display: flex;\n    align-items: center;\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    right: 4px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    width: 0;\n    height: 0;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-bottom: 6px solid #bbb;\n  }\n\n  .tabulator .tabulator-header .tabulator-col.tabulator-col-group .tabulator-col-group-cols {\n    position: relative;\n    display: flex;\n    border-top: 1px solid #ddd;\n    overflow: hidden;\n    margin-right: -1px;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter {\n    position: relative;\n    box-sizing: border-box;\n    margin-top: 2px;\n    width: 100%;\n    text-align: center;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter textarea {\n    height: auto !important;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter svg {\n    margin-top: 3px;\n  }\n\n  .tabulator .tabulator-header .tabulator-col .tabulator-header-filter input::-ms-clear {\n    width: 0;\n    height: 0;\n  }\n\n  .tabulator .tabulator-header .tabulator-col.tabulator-sortable .tabulator-col-title {\n    padding-right: 25px;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable.tabulator-col-sorter-element:hover {\n      cursor: pointer;\n      background-color: #e6e6e6;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='none']\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    color: #bbb;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable[aria-sort='none']\n      .tabulator-col-content\n      .tabulator-col-sorter.tabulator-col-sorter-element\n      .tabulator-arrow:hover {\n      cursor: pointer;\n      border-bottom: 6px solid #555;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='none']\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    border-top: none;\n    border-bottom: 6px solid #bbb;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='ascending']\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    color: #666;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable[aria-sort='ascending']\n      .tabulator-col-content\n      .tabulator-col-sorter.tabulator-col-sorter-element\n      .tabulator-arrow:hover {\n      cursor: pointer;\n      border-bottom: 6px solid #555;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='ascending']\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    border-top: none;\n    border-bottom: 6px solid #666;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='descending']\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    color: #666;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator\n      .tabulator-header\n      .tabulator-col.tabulator-sortable[aria-sort='descending']\n      .tabulator-col-content\n      .tabulator-col-sorter.tabulator-col-sorter-element\n      .tabulator-arrow:hover {\n      cursor: pointer;\n      border-top: 6px solid #555;\n    }\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-sortable[aria-sort='descending']\n    .tabulator-col-content\n    .tabulator-col-sorter\n    .tabulator-arrow {\n    border-bottom: none;\n    border-top: 6px solid #666;\n    color: #666;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical\n    .tabulator-col-content\n    .tabulator-col-title {\n    writing-mode: vertical-rl;\n    text-orientation: mixed;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-col-vertical-flip\n    .tabulator-col-title {\n    transform: rotate(180deg);\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-sortable\n    .tabulator-col-title {\n    padding-right: 0;\n    padding-top: 20px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-sortable.tabulator-col-vertical-flip\n    .tabulator-col-title {\n    padding-right: 0;\n    padding-bottom: 20px;\n  }\n\n  .tabulator\n    .tabulator-header\n    .tabulator-col.tabulator-col-vertical.tabulator-sortable\n    .tabulator-col-sorter {\n    justify-content: center;\n    left: 0;\n    right: 0;\n    top: 4px;\n    bottom: auto;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen {\n    position: sticky;\n    left: 0;\n    z-index: 11;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-left {\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen.tabulator-frozen-right {\n    border-left: 2px solid #ddd;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder {\n    box-sizing: border-box;\n    background: white !important;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {\n    background: white !important;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {\n    display: none;\n  }\n\n  .tabulator .tabulator-header .tabulator-frozen-rows-holder:empty {\n    display: none;\n  }\n\n  .tabulator .tabulator-tableholder {\n    position: relative;\n    width: 100%;\n    white-space: nowrap;\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .tabulator .tabulator-tableholder:focus {\n    outline: none;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder {\n    box-sizing: border-box;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 100%;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder[tabulator-render-mode='virtual'] {\n    min-height: 100%;\n    min-width: 100%;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder .tabulator-placeholder-contents {\n    display: inline-block;\n    text-align: center;\n    padding: 10px;\n    color: #ccc;\n    font-weight: bold;\n    font-size: 20px;\n    white-space: normal;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-table {\n    position: relative;\n    display: inline-block;\n    white-space: nowrap;\n    overflow: visible;\n    color: #333;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-table .tabulator-row.tabulator-calcs {\n    font-weight: bold;\n    background: #f2f2f2;\n  }\n\n  .tabulator\n    .tabulator-tableholder\n    .tabulator-table\n    .tabulator-row.tabulator-calcs.tabulator-calcs-top {\n    border-bottom: 2px solid #ddd;\n  }\n\n  .tabulator\n    .tabulator-tableholder\n    .tabulator-table\n    .tabulator-row.tabulator-calcs.tabulator-calcs-bottom {\n    border-top: 2px solid #ddd;\n  }\n\n  .tabulator .tabulator-footer {\n    border-top: 1px solid #999;\n    background-color: #fff;\n    color: #555;\n    font-weight: bold;\n    white-space: nowrap;\n    user-select: none;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n  }\n\n  .tabulator .tabulator-footer .tabulator-footer-contents {\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n    justify-content: space-between;\n    padding: 5px 10px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-footer-contents:empty {\n    display: none;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder {\n    box-sizing: border-box;\n    width: 100%;\n    text-align: left;\n    background: white !important;\n    border-bottom: 1px solid #ddd;\n    border-top: 1px solid #ddd;\n    overflow: hidden;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {\n    display: inline-block;\n    background: white !important;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row .tabulator-col-resize-handle {\n    display: none;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder:only-child {\n    margin-bottom: -5px;\n    border-bottom: none;\n  }\n\n  .tabulator .tabulator-footer > * + .tabulator-page-counter {\n    margin-left: 10px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page-counter {\n    font-weight: normal;\n  }\n\n  .tabulator .tabulator-footer .tabulator-paginator {\n    flex: 1;\n    text-align: right;\n    color: #555;\n    font-family: inherit;\n    font-weight: inherit;\n    font-size: inherit;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page-size {\n    display: inline-block;\n    margin: 0 5px;\n    padding: 2px 5px;\n    border: 1px solid #aaa;\n    border-radius: 3px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-pages {\n    margin: 0 7px;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page {\n    display: inline-block;\n    margin: 0 2px;\n    padding: 2px 5px;\n    border: 1px solid #aaa;\n    border-radius: 3px;\n    background: rgba(255, 255, 255, 0.2);\n  }\n\n  .tabulator .tabulator-footer .tabulator-page.active {\n    color: #d00;\n  }\n\n  .tabulator .tabulator-footer .tabulator-page:disabled {\n    opacity: 0.5;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator .tabulator-footer .tabulator-page:not(.disabled):hover {\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.2);\n      color: #fff;\n    }\n  }\n\n  .tabulator .tabulator-col-resize-handle {\n    position: relative;\n    display: inline-block;\n    width: 6px;\n    margin-left: -3px;\n    margin-right: -3px;\n    z-index: 10;\n    vertical-align: middle;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator .tabulator-col-resize-handle:hover {\n      cursor: ew-resize;\n    }\n  }\n\n  .tabulator .tabulator-col-resize-handle:last-of-type {\n    width: 3px;\n    margin-right: 0;\n  }\n\n  .tabulator .tabulator-alert {\n    position: absolute;\n    display: flex;\n    align-items: center;\n    top: 0;\n    left: 0;\n    z-index: 100;\n    height: 100%;\n    width: 100%;\n    background: rgba(0, 0, 0, 0.4);\n    text-align: center;\n  }\n\n  .tabulator .tabulator-alert .tabulator-alert-msg {\n    display: inline-block;\n    margin: 0 auto;\n    padding: 10px 20px;\n    border-radius: 10px;\n    background: #fff;\n    font-weight: bold;\n    font-size: 16px;\n  }\n\n  .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-msg {\n    border: 4px solid #333;\n    color: #000;\n  }\n\n  .tabulator .tabulator-alert .tabulator-alert-msg.tabulator-alert-state-error {\n    border: 4px solid #d00;\n    color: #590000;\n  }\n\n  .tabulator-row {\n    position: relative;\n    box-sizing: border-box;\n    min-height: 22px;\n    background-color: #fff;\n  }\n\n  .tabulator-row.tabulator-row-even {\n    background-color: #fff;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row.tabulator-selectable:hover {\n      background-color: #bbb;\n      cursor: pointer;\n    }\n  }\n\n  .tabulator-row.tabulator-selected {\n    background-color: #9abcea;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row.tabulator-selected:hover {\n      background-color: #769bcc;\n      cursor: pointer;\n    }\n  }\n\n  .tabulator-row.tabulator-row-moving {\n    border: 1px solid #000;\n    background: #fff;\n  }\n\n  .tabulator-row.tabulator-moving {\n    position: absolute;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n    pointer-events: none;\n    z-index: 15;\n  }\n\n  .tabulator-row .tabulator-row-resize-handle {\n    position: absolute;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    height: 5px;\n  }\n\n  .tabulator-row .tabulator-row-resize-handle.prev {\n    top: 0;\n    bottom: auto;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row .tabulator-row-resize-handle:hover {\n      cursor: ns-resize;\n    }\n  }\n\n  .tabulator-row .tabulator-responsive-collapse {\n    box-sizing: border-box;\n    padding: 5px;\n    border-top: 1px solid #ddd;\n    border-bottom: 1px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse:empty {\n    display: none;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse table {\n    font-size: 14px;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse table tr td {\n    position: relative;\n  }\n\n  .tabulator-row .tabulator-responsive-collapse table tr td:first-of-type {\n    padding-right: 10px;\n  }\n\n  .tabulator-row .tabulator-cell {\n    display: inline-flex;\n    position: unset;\n    box-sizing: border-box;\n    padding: 4px 8px;\n    border-right: 1px solid #ddd;\n    vertical-align: middle;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-frozen {\n    display: inline-flex;\n    position: sticky;\n    left: 0;\n    background-color: inherit;\n    z-index: 11;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {\n    border-left: 2px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-editing {\n    border: 1px solid #1d68cd;\n    outline: none;\n    padding: 0;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-editing input,\n  .tabulator-row .tabulator-cell.tabulator-editing select {\n    border: 1px;\n    background: transparent;\n    outline: none;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-validation-fail {\n    border: 1px solid #dd0000;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-validation-fail input,\n  .tabulator-row .tabulator-cell.tabulator-validation-fail select {\n    border: 1px;\n    background: transparent;\n    color: #dd0000;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-row-handle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n  }\n\n  .tabulator-row .tabulator-cell.tabulator-row-handle .tabulator-row-handle-box {\n    width: 80%;\n  }\n\n  .tabulator-row\n    .tabulator-cell.tabulator-row-handle\n    .tabulator-row-handle-box\n    .tabulator-row-handle-bar {\n    width: 100%;\n    height: 3px;\n    margin-top: 2px;\n    background: #666;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-branch-empty {\n    display: inline-block;\n    width: 7px;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-branch {\n    display: inline-block;\n    vertical-align: middle;\n    height: 9px;\n    width: 7px;\n    margin-top: -9px;\n    margin-right: 5px;\n    border-bottom-left-radius: 1px;\n    border-left: 2px solid #ddd;\n    border-bottom: 2px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-control {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    height: 11px;\n    width: 11px;\n    margin-right: 5px;\n    border: 1px solid #333;\n    border-radius: 2px;\n    background: rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row .tabulator-cell .tabulator-data-tree-control:hover {\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.2);\n    }\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-data-tree-control\n    .tabulator-data-tree-control-collapse {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: transparent;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-data-tree-control\n    .tabulator-data-tree-control-collapse:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-data-tree-control .tabulator-data-tree-control-expand {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: #333;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-data-tree-control\n    .tabulator-data-tree-control-expand:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    -moz-user-select: none;\n    -khtml-user-select: none;\n    -webkit-user-select: none;\n    -o-user-select: none;\n    height: 15px;\n    width: 15px;\n    border-radius: 20px;\n    background: #666;\n    color: #fff;\n    font-weight: bold;\n    font-size: 1.1em;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle:hover {\n      opacity: 0.7;\n      cursor: pointer;\n    }\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-responsive-collapse-toggle.open\n    .tabulator-responsive-collapse-toggle-close {\n    display: initial;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-responsive-collapse-toggle.open\n    .tabulator-responsive-collapse-toggle-open {\n    display: none;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-responsive-collapse-toggle svg {\n    stroke: #fff;\n  }\n\n  .tabulator-row\n    .tabulator-cell\n    .tabulator-responsive-collapse-toggle\n    .tabulator-responsive-collapse-toggle-close {\n    display: none;\n  }\n\n  .tabulator-row .tabulator-cell .tabulator-traffic-light {\n    display: inline-block;\n    height: 14px;\n    width: 14px;\n    border-radius: 14px;\n  }\n\n  .tabulator-row.tabulator-group {\n    box-sizing: border-box;\n    border-bottom: 1px solid #999;\n    border-right: 1px solid #ddd;\n    border-top: 1px solid #999;\n    padding: 5px;\n    padding-left: 10px;\n    background: #ccc;\n    font-weight: bold;\n    min-width: 100%;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-row.tabulator-group:hover {\n      cursor: pointer;\n      background-color: rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-visible .tabulator-arrow {\n    margin-right: 10px;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid #666;\n    border-bottom: 0;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-1 {\n    padding-left: 30px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-2 {\n    padding-left: 50px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-3 {\n    padding-left: 70px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-4 {\n    padding-left: 90px;\n  }\n\n  .tabulator-row.tabulator-group.tabulator-group-level-5 {\n    padding-left: 110px;\n  }\n\n  .tabulator-row.tabulator-group .tabulator-group-toggle {\n    display: inline-block;\n  }\n\n  .tabulator-row.tabulator-group .tabulator-arrow {\n    display: inline-block;\n    width: 0;\n    height: 0;\n    margin-right: 16px;\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-right: 0;\n    border-left: 6px solid #666;\n    vertical-align: middle;\n  }\n\n  .tabulator-row.tabulator-group span {\n    margin-left: 10px;\n    color: #d00;\n  }\n\n  .tabulator-popup-container {\n    position: absolute;\n    display: inline-block;\n    box-sizing: border-box;\n    background: #fff;\n    border: 1px solid #ddd;\n    box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.2);\n    font-size: 14px;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n    z-index: 10000;\n  }\n\n  .tabulator-popup {\n    padding: 5px;\n    border-radius: 3px;\n  }\n\n  .tabulator-tooltip {\n    max-width: Min(500px, 100%);\n    padding: 3px 5px;\n    border-radius: 2px;\n    box-shadow: none;\n    font-size: 12px;\n    pointer-events: none;\n  }\n\n  .tabulator-menu .tabulator-menu-item {\n    position: relative;\n    box-sizing: border-box;\n    padding: 5px 10px;\n    user-select: none;\n  }\n\n  .tabulator-menu .tabulator-menu-item.tabulator-menu-item-disabled {\n    opacity: 0.5;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-menu .tabulator-menu-item:not(.tabulator-menu-item-disabled):hover {\n      cursor: pointer;\n      background: #fff;\n    }\n  }\n\n  .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu {\n    padding-right: 25px;\n  }\n\n  .tabulator-menu .tabulator-menu-item.tabulator-menu-item-submenu::after {\n    display: inline-block;\n    position: absolute;\n    top: calc(5px + 0.4em);\n    right: 10px;\n    height: 7px;\n    width: 7px;\n    content: '';\n    border-width: 1px 1px 0 0;\n    border-style: solid;\n    border-color: #ddd;\n    vertical-align: top;\n    transform: rotate(45deg);\n  }\n\n  .tabulator-menu .tabulator-menu-separator {\n    border-top: 1px solid #ddd;\n  }\n\n  .tabulator-edit-list {\n    max-height: 200px;\n    font-size: 14px;\n    overflow-y: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item {\n    padding: 4px;\n    color: #333;\n    outline: none;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.active {\n    color: #fff;\n    background: #1d68cd;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.active.focused {\n    outline: 1px solid rgba(255, 255, 255, 0.5);\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.focused {\n    outline: 1px solid #1d68cd;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-edit-list .tabulator-edit-list-item:hover {\n      cursor: pointer;\n      color: #fff;\n      background: #1d68cd;\n    }\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-placeholder {\n    padding: 4px;\n    color: #333;\n    text-align: center;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-group {\n    border-bottom: 1px solid #ddd;\n    padding: 4px;\n    padding-top: 6px;\n    color: #333;\n    font-weight: bold;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-2,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-2 {\n    padding-left: 12px;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-3,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-3 {\n    padding-left: 20px;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-4,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-4 {\n    padding-left: 28px;\n  }\n\n  .tabulator-edit-list .tabulator-edit-list-item.tabulator-edit-list-group-level-5,\n  .tabulator-edit-list .tabulator-edit-list-group.tabulator-edit-list-group-level-5 {\n    padding-left: 36px;\n  }\n\n  .tabulator.tabulator-ltr {\n    direction: ltr;\n  }\n\n  .tabulator.tabulator-rtl {\n    text-align: initial;\n    direction: rtl;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-header .tabulator-col {\n    text-align: initial;\n    border-left: 1px solid #ddd;\n    border-right: initial;\n  }\n\n  .tabulator.tabulator-rtl\n    .tabulator-header\n    .tabulator-col.tabulator-col-group\n    .tabulator-col-group-cols {\n    margin-right: initial;\n    margin-left: -1px;\n  }\n\n  .tabulator.tabulator-rtl\n    .tabulator-header\n    .tabulator-col.tabulator-sortable\n    .tabulator-col-title {\n    padding-right: 0;\n    padding-left: 25px;\n  }\n\n  .tabulator.tabulator-rtl\n    .tabulator-header\n    .tabulator-col\n    .tabulator-col-content\n    .tabulator-col-sorter {\n    left: 8px;\n    right: initial;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell {\n    border-right: initial;\n    border-left: 1px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-branch {\n    margin-right: initial;\n    margin-left: 5px;\n    border-bottom-left-radius: initial;\n    border-bottom-right-radius: 1px;\n    border-left: initial;\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell .tabulator-data-tree-control {\n    margin-right: initial;\n    margin-left: 5px;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-left {\n    border-left: 2px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-cell.tabulator-frozen.tabulator-frozen-right {\n    border-right: 2px solid #ddd;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-row .tabulator-col-resize-handle:last-of-type {\n    width: 3px;\n    margin-left: 0;\n    margin-right: -3px;\n  }\n\n  .tabulator.tabulator-rtl .tabulator-footer .tabulator-calcs-holder {\n    text-align: initial;\n  }\n\n  .tabulator-print-fullscreen {\n    position: absolute;\n    top: 0;\n    bottom: 0;\n    left: 0;\n    right: 0;\n    z-index: 10000;\n  }\n\n  body.tabulator-print-fullscreen-hide > *:not(.tabulator-print-fullscreen) {\n    display: none !important;\n  }\n\n  .tabulator-print-table {\n    border-collapse: collapse;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-branch {\n    display: inline-block;\n    vertical-align: middle;\n    height: 9px;\n    width: 7px;\n    margin-top: -9px;\n    margin-right: 5px;\n    border-bottom-left-radius: 1px;\n    border-left: 2px solid #ddd;\n    border-bottom: 2px solid #ddd;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group {\n    box-sizing: border-box;\n    border-bottom: 1px solid #999;\n    border-right: 1px solid #ddd;\n    border-top: 1px solid #999;\n    padding: 5px;\n    padding-left: 10px;\n    background: #ccc;\n    font-weight: bold;\n    min-width: 100%;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-print-table .tabulator-print-table-group:hover {\n      cursor: pointer;\n      background-color: rgba(0, 0, 0, 0.1);\n    }\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-visible .tabulator-arrow {\n    margin-right: 10px;\n    border-left: 6px solid transparent;\n    border-right: 6px solid transparent;\n    border-top: 6px solid #666;\n    border-bottom: 0;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-1 td {\n    padding-left: 30px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-2 td {\n    padding-left: 50px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-3 td {\n    padding-left: 70px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-4 td {\n    padding-left: 90px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group.tabulator-group-level-5 td {\n    padding-left: 110px !important;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group .tabulator-group-toggle {\n    display: inline-block;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group .tabulator-arrow {\n    display: inline-block;\n    width: 0;\n    height: 0;\n    margin-right: 16px;\n    border-top: 6px solid transparent;\n    border-bottom: 6px solid transparent;\n    border-right: 0;\n    border-left: 6px solid #666;\n    vertical-align: middle;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group span {\n    margin-left: 10px;\n    color: #d00;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control {\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    vertical-align: middle;\n    height: 11px;\n    width: 11px;\n    margin-right: 5px;\n    border: 1px solid #333;\n    border-radius: 2px;\n    background: rgba(0, 0, 0, 0.1);\n    overflow: hidden;\n  }\n\n  @media (hover: hover) and (pointer: fine) {\n    .tabulator-print-table .tabulator-data-tree-control:hover {\n      cursor: pointer;\n      background: rgba(0, 0, 0, 0.2);\n    }\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: transparent;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-collapse:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand {\n    display: inline-block;\n    position: relative;\n    height: 7px;\n    width: 1px;\n    background: #333;\n  }\n\n  .tabulator-print-table .tabulator-data-tree-control .tabulator-data-tree-control-expand:after {\n    position: absolute;\n    content: '';\n    left: -3px;\n    top: 3px;\n    height: 1px;\n    width: 7px;\n    background: #333;\n  }\n\n  .tabulator {\n    border: none;\n    background-color: #fff;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder {\n    background: #f2f2f2 !important;\n    border-bottom: 1px solid #999;\n  }\n\n  .tabulator .tabulator-header .tabulator-calcs-holder .tabulator-row {\n    background: #f2f2f2 !important;\n  }\n\n  .tabulator .tabulator-tableholder .tabulator-placeholder span {\n    color: #000;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder {\n    background: #f2f2f2 !important;\n    border-bottom: 1px solid #fff;\n  }\n\n  .tabulator .tabulator-footer .tabulator-calcs-holder .tabulator-row {\n    background: #f2f2f2 !important;\n  }\n\n  .tabulator-row {\n    border-bottom: 1px solid #ddd;\n  }\n\n  .tabulator-row .tabulator-cell:last-of-type {\n    border-right: none;\n  }\n\n  .tabulator-row.tabulator-group span {\n    color: #666;\n  }\n\n  .tabulator-print-table .tabulator-print-table-group span {\n    margin-left: 10px;\n    color: #666;\n  }\n\n  /*# sourceMappingURL=tabulator_simple.css.map */\n`",
-          "description": "External styles for the Tabulator grid.",
+          "kind": "function",
+          "name": "textFormatter",
+          "return": {
+            "type": {
+              "text": ""
+            }
+          },
+          "parameters": [
+            {
+              "name": "cell",
+              "type": {
+                "text": "any"
+              },
+              "description": "The cell component provided by Tabulator"
+            },
+            {
+              "name": "formatterParams",
+              "default": "{}",
+              "type": {
+                "text": "TextFormatterParams<T>"
+              },
+              "description": "Text formatter parameters"
+            }
+          ],
+          "description": "Text formatter for customized display of values.\nStyled to match grid-pro text renderer.",
           "privacy": "public"
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "tabulatorThemeSimpleCSS",
+          "name": "textFormatter",
           "declaration": {
-            "name": "tabulatorThemeSimpleCSS",
-            "module": "src/external/tabulator-theme-simple-css.ts"
+            "name": "textFormatter",
+            "module": "src/cell-formatters/text.formatter.ts"
           }
         }
       ]