{"id": "javascript_plugins:javascript-plugins-makeabovetablepanelconfigs", "page": "javascript_plugins", "ref": "javascript-plugins-makeabovetablepanelconfigs", "title": "makeAboveTablePanelConfigs()", "content": "This method should return a JavaScript array of objects defining additional panels to be added to the top of the table page. Each object should have the following: \n                 \n                     \n                         id  - string \n                         \n                             A unique string ID for the panel, for example  map-panel \n                         \n                     \n                     \n                         label  - string \n                         \n                             A human-readable label for the panel \n                         \n                     \n                     \n                         render(node)  - function \n                         \n                             A function that will be called with a DOM node to render the panel into \n                         \n                     \n                 \n                 This example shows how a plugin might define a single panel: \n                 document.addEventListener('datasette_init', function(ev) {\n  ev.detail.registerPlugin('panel-plugin', {\n    version: 0.1,\n    makeAboveTablePanelConfigs: () => {\n      return [\n        {\n          id: 'first-panel',\n          label: 'First panel',\n          render: node => {\n            node.innerHTML = '<h2>My custom panel</h2><p>This is a custom panel that I added using a JavaScript plugin</p>';\n          }\n        }\n      ]\n    }\n  });\n}); \n                 When a page with a table loads, all registered plugins that implement  makeAboveTablePanelConfigs()  will be called and panels they return will be added to the top of the table page.", "breadcrumbs": "[\"JavaScript plugins\", \"JavaScript plugin objects\"]", "references": "[]"}
{"id": "javascript_plugins:javascript-plugins-makecolumnactions", "page": "javascript_plugins", "ref": "javascript-plugins-makecolumnactions", "title": "makeColumnActions(columnDetails)", "content": "This method, if present, will be called when Datasette is rendering the cog action menu icons that appear at the top of the table view. By default these include options like \"Sort ascending/descending\" and \"Facet by this\", but plugins can return additional actions to be included in this menu. \n                 The method will be called with a  columnDetails  object with the following keys: \n                 \n                     \n                         columnName  - string \n                         \n                             The name of the column \n                         \n                     \n                     \n                         columnNotNull  - boolean \n                         \n                             True if the column is defined as NOT NULL \n                         \n                     \n                     \n                         columnType  - string \n                         \n                             The SQLite data type of the column \n                         \n                     \n                     \n                         isPk  - boolean \n                         \n                             True if the column is part of the primary key \n                         \n                     \n                 \n                 It should return a JavaScript array of objects each with a  label  and  onClick  property: \n                 \n                     \n                         label  - string \n                         \n                             The human-readable label for the action \n                         \n                     \n                     \n                         onClick(evt)  - function \n                         \n                             A function that will be called when the action is clicked \n                         \n                     \n                 \n                 The  evt  object passed to the  onClick  is the standard browser event object that triggered the click. \n                 This example plugin adds two menu items - one to copy the column name to the clipboard and another that displays the column metadata in an  alert()  window: \n                 document.addEventListener('datasette_init', function(ev) {\n  ev.detail.registerPlugin('column-name-plugin', {\n    version: 0.1,\n    makeColumnActions: (columnDetails) => {\n      return [\n        {\n          label: 'Copy column to clipboard',\n          onClick: async (evt) => {\n            await navigator.clipboard.writeText(columnDetails.columnName)\n          }\n        },\n        {\n          label: 'Alert column metadata',\n          onClick: () => alert(JSON.stringify(columnDetails, null, 2))\n        }\n      ];\n    }\n  });\n});", "breadcrumbs": "[\"JavaScript plugins\", \"JavaScript plugin objects\"]", "references": "[]"}