{"id":42761,"library":"flat-tree-builder","title":"flat-tree-builder","description":"A package for building tree structures from Postgres ltree data. Version 1.5.28 provides a Classifier class that renders interactive, draggable tree lists in the browser. It requires Bootstrap and is ESM-only. Key differentiators: tight integration with Postgres ltree paths, built-in CRUD operations via configurable URLs, drag-and-drop support, and a modal form for editing. The project appears to be actively maintained with regular releases.","status":"active","version":"1.5.28","language":"javascript","source_language":"en","source_url":null,"tags":["javascript"],"install":[{"cmd":"npm install flat-tree-builder","lang":"bash","label":"npm"},{"cmd":"yarn add flat-tree-builder","lang":"bash","label":"yarn"},{"cmd":"pnpm add flat-tree-builder","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"CSS dependency for styling (used in example HTML)","package":"bootstrap","optional":false}],"imports":[{"note":"The package uses a default export for the Classifier class. Named imports will not work.","wrong":"import { Classifier } from 'flat-tree-builder'","symbol":"Classifier","correct":"import Classifier from 'flat-tree-builder'"},{"note":"This package is ESM-only and cannot be required with CommonJS. Use import instead.","wrong":"const Classifier = require('flat-tree-builder')","symbol":"Classifier","correct":"import Classifier from 'flat-tree-builder'"},{"note":"You must also import the CSS file separately using the path 'flat-tree-builder/classifier.css'.","wrong":"import 'flat-tree-builder'","symbol":"flat-tree-builder","correct":"import Classifier from 'flat-tree-builder'; import 'flat-tree-builder/classifier.css'"}],"quickstart":{"code":"<link rel=\"stylesheet\" href=\"./node_modules/bootstrap/dist/css/bootstrap.min.css\" />\n<link rel=\"stylesheet\" href=\"./node_modules/flat-tree-builder/classifier.css\" />\n\n<div id=\"test\"></div>\n\n<script type=\"module\">\nimport Classifier from 'flat-tree-builder';\n\nconst classifier = new Classifier('#test', {\n  test: true,\n  search: true,\n  getUrl: '/api/tree',\n  postClassifierUrl: '/api/tree',\n  delUrl: '/api/tree',\n  selectedIds: [],\n  path: 'tree_path',\n  draggable: false,\n  isRootSelectable: true\n});\n</script>","lang":"javascript","description":"Shows how to import the Classifier, include required CSS, and instantiate it with configuration options."},"warnings":[{"fix":"Use ES module imports (import) instead of require(). Ensure your project or script is set up for ESM.","message":"Package is ESM-only and does not support CommonJS require().","severity":"breaking","affected_versions":">=1.0.0"},{"fix":"Pass a query selector string like '#test' or '.classifier', not document.getElementById('test').","message":"The Classifier must be instantiated with a valid CSS selector string as the first argument, not a DOM element.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always provide at least the 'getUrl' option when not using test mode.","message":"The configuration object requires a 'getUrl' property; if missing, requests will fail silently.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Add a Bootstrap CSS link in your HTML (e.g., from node_modules or CDN).","message":"Bootstrap CSS is required for styling but not automatically bundled; you must include it separately.","severity":"breaking","affected_versions":">=1.0.0"}],"env_vars":null,"search_vec":"'1.5.28':16 'activ':70 'appear':67 'bootstrap':32 'browser':29 'build':8 'builder':4 'built':47 'built-in':46 'class':20 'classifi':19 'configur':52 'crud':49 'data':14 'differenti':39 'drag':55 'drag-and-drop':54 'draggabl':24 'drop':57 'edit':64 'esm':36 'esm-on':35 'flat':2 'flat-tree-build':1 'form':62 'integr':41 'interact':23 'javascript':75 'key':38 'list':26 'ltree':13,44 'maintain':71 'modal':61 'oper':50 'packag':6 'path':45 'postgr':12,43 'project':66 'provid':17 'regular':73 'releas':74 'render':22 'requir':31 'structur':10 'support':58 'tight':40 'tree':3,9,25 'url':53 'version':15 'via':51","created_at":"2026-06-05T16:56:32.383385+00:00","updated_at":"2026-06-05T16:56:32.383385+00:00","problems":[{"fix":"Use: import Classifier from 'flat-tree-builder'","cause":"Using a named import { Classifier } instead of the default import.","error":"Uncaught SyntaxError: The requested module 'flat-tree-builder' does not provide an export named 'Classifier'"},{"fix":"Switch to ES module imports: import Classifier from 'flat-tree-builder'","cause":"Trying to use CommonJS require() on an ESM-only package.","error":"Error [ERR_REQUIRE_ESM]: require() of ES Module not supported."},{"fix":"Pass a valid CSS selector string (e.g., '#myId') and ensure the element exists in the DOM.","cause":"Instantiating Classifier with a DOM element instead of a selector string, or the selector did not match any element.","error":"TypeError: Cannot read properties of undefined (reading 'querySelector')"}],"ecosystem":"npm","meta_description":null,"install_score":null,"quickstart_score":null,"quickstart_tag":null,"pypi_latest":null,"cli_name":null,"cli_version":null,"type":"library","homepage":null,"github":null,"docs":null,"changelog":null,"pypi":null,"npm":"flat-tree-builder","openapi_spec":null,"status_page":null,"smithery":null,"categories":["database"],"base_url":null,"auth_type":null,"provenance":{"verified_status":null,"verified_at":null,"last_verified":"2026-06-05","next_check":"2026-09-03","install_tag":null}}