rowid,title,content,sections_fts,rank 1,Custom pages and templates,Datasette provides a number of ways of customizing the way data is displayed.,3, 2,CSS classes on the ,"Every default template includes CSS classes in the body designed to support custom styling. The index template (the top level page at / ) gets this: The database template ( /dbname ) gets this: The custom SQL template ( /dbname?sql=... ) gets this: A stored query template ( /dbname/queryname ) gets this: The table template ( /dbname/tablename ) gets: The row template ( /dbname/tablename/rowid ) gets: The db-x and table-x classes use the database or table names themselves if they are valid CSS identifiers. If they aren't, we strip any invalid characters out and append a 6 character md5 digest of the original name, in order to ensure that multiple tables which resolve to the same stripped character version still have different CSS classes. Some examples: ""simple"" => ""simple"" ""MixedCase"" => ""MixedCase"" ""-no-leading-hyphens"" => ""no-leading-hyphens-65bea6"" ""_no-leading-underscores"" => ""no-leading-underscores-b921bc"" ""no spaces"" => ""no-spaces-7088d7"" ""-"" => ""336d5e"" ""no $ characters"" => ""no--characters-59e024"" and elements also get custom CSS classes reflecting the database column they are representing, for example:
id name
1 SMITH
",3, 3,Writing custom CSS,"Custom templates need to take Datasette's default CSS into account. The pattern portfolio at /-/patterns ( example here ) is a useful reference for understanding the available CSS classes. The core class is particularly useful - you can apply this directly to a or '; node.querySelector('button').addEventListener('click', () => { location.href = '/-/agent/new'; }); } } ]; } }); });",3, 94,makeAboveTablePanelConfigs(),"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: id - string A unique string ID for the panel, for example map-panel label - string A human-readable label for the panel render(node) - function A function that will be called with a DOM node to render the panel into This example shows how a plugin might define a single panel: document.addEventListener('datasette_init', function(ev) { ev.detail.registerPlugin('panel-plugin', { version: 0.1, makeAboveTablePanelConfigs: () => { return [ { id: 'first-panel', label: 'First panel', render: node => { node.innerHTML = '

My custom panel

This is a custom panel that I added using a JavaScript plugin

'; } } ] } }); }); 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.",3, 95,makeColumnActions(columnDetails),"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. The method will be called with a columnDetails object with the following keys: columnName - string The name of the column columnNotNull - boolean True if the column is defined as NOT NULL columnType - string The SQLite data type of the column isPk - boolean True if the column is part of the primary key It should return a JavaScript array of objects each with a label and onClick property: label - string The human-readable label for the action onClick(evt) - function A function that will be called when the action is clicked The evt object passed to the onClick is the standard browser event object that triggered the click. 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: document.addEventListener('datasette_init', function(ev) { ev.detail.registerPlugin('column-name-plugin', { version: 0.1, makeColumnActions: (columnDetails) => { return [ { label: 'Copy column to clipboard', onClick: async (evt) => { await navigator.clipboard.writeText(columnDetails.columnName) } }, { label: 'Alert column metadata', onClick: () => alert(JSON.stringify(columnDetails, null, 2)) } ]; } }); });",3, 96,makeColumnField(context),"This method, if present, can provide a custom form field for a column in Datasette's row insert and edit dialogs. It is designed for plugins that register custom column types using the Python register_column_types() plugin hook. For example, a plugin that defines a file column type can use makeColumnField() to replace a plain text input with a file picker, and a plugin that defines a rich text column type can use it to enhance the field with an editor. Datasette calls makeColumnField(context) on each registered JavaScript plugin when it renders an editable insert/edit field. Plugins should inspect the context object and only return a control object if they can handle that field. Otherwise, use a bare return; . The first plugin to return a truthy control object is used for that field. Plugins are called in registration order. If a plugin raises an exception, Datasette logs the error to the browser console and continues to the next plugin. The row dialog tracks the value that will be sent to the insert/update API. The context object describes the column and form environment; custom controls should read and write field values using the field helper object passed to render(field) .",3, 97,Context object,"makeColumnField(context) is called with a context object describing the field. The current context object has these keys: mode - string ""insert"" or ""edit"" . database - string or null The database name. table - string or null The table name. tableUrl - string or null The path to the table page, including any configured base URL prefix . column - string The column name. columnType - object or null The configured Datasette column type for this column, if one exists. This is null if no column type has been configured. If present, this object has exactly these keys: type - string The registered column type name , matching the name attribute of the Python ColumnType subclass. config - object Configuration for this specific column type assignment. This is {} if no configuration has been set. sqliteType - string or null The SQLite affinity for this column, if known. This is one of ""TEXT"" , ""INTEGER"" , ""REAL"" , ""BLOB"" , ""NUMERIC"" or null if Datasette could not determine the affinity. notNull - boolean True if the column is defined as NOT NULL . isPk - boolean True if this column is part of the table's primary key. defaultExpression - string or null The SQLite default expression for the column, if available. This is null if the column has no SQLite default. For example, a column defined with DEFAULT (datetime('now')) will have ""datetime('now')"" here. This is the expression from the table schema, not the actual value SQLite will insert. form - HTMLFormElement or null The row insert/edit form element. dialog - HTMLDialogElement or null The modal dialog element.",3, 98,Returned control object,"A plugin that wants to handle a field should return an object. Datasette currently recognizes these properties: useTextarea - boolean, optional If true, Datasette creates a