Whether your data is hosted on the web, stored in a database, or saved in a local file, you can access it from Observable with these techniques.

Mike Bostock

Observable

Introduction to data

File attachments

Visnu Pitiyanuvath

Connecting to databases

Self-hosted database proxies

Annie Zhang

SQL cell

Wiltse Carpenter

Cloud files

Introduction to secrets

Cobus Theunissen

AWS S3 private file access

Justin Ting

Data table cell

Databases panel and schema viewer

Sample datasets

Ian Johnson

Curated datasets

SQLite

Custom database clients for use with Observable SQL cells.

Database Clients

Learn how Observable works, from first edit to publish.

Documentation

Getting Data In and Out

Resources for working with SQL in Observable

Hi, I need Javascript code for data table cell, Please help

Karthik Kaliyaperumal

Also interested, is the code publicly available? Thx

Hi @xuehaiwang, the source code behind the data table cell is not available, but you can see some publicly available "prior art" in this notebook: https://observablehq.com/@observablehq/summary-table

Mike Freeman

Is there a way to customize the _default_ column width per column ? Right now It seems like all columns get equal weight, even though some of the row contents are much larger for some (eg., Address). If the source data changes, the table column width gets reset.

Ideally the function would be have a way to pass a dict with the columns name / % table width, and also a way to enable wrapping long texts into multiple lines (à la MS Excel).

Hey JP, sorry for the delay! There is not a way to automatically do that with the data table cell, but if you add a JavaScript table, you can fully customize the formatting however you like. This notebook will walk you through how that works: https://observablehq.com/@observablehq/input-table?collection=@observablehq/inputs

Paul Buffa

tableCellColumns_UI_v6.png

tableCell_myTable_filter_v6@1.png

tableCellSelectDBMenu_UI_v6.png

tableCellSelectDB_UI_v6.png

tableCellUnnamed_UI_v6.png

tableCellName_UI_v6@2.png

table_overview_v6.png

tableCellPopulated_UI_v6@1.png

tableCellDemoTableMenu_UI_v5.png

tableCell_Columns_Show_All_v2.png

tableCell_Columns_only_v2.png

tableCell_Columns_v3.png

convertedSQLCell.png

convertToSQL_modal_v2.png

convertToSQL_v2.png

tableCellRowHover_v2.png

summaryTableInteractive_v5-1.png

tableCellDemoSelectTable_UI_v6.png

tableCell_FilterCriteria_Column.png

tableCell_FilterCriteria_ThreeFields.png

tableCell_SortCriteria_Column.png

tableCell_Sort_Up_or_Down.png

tableCell_ColSumm_Hist_Before.png

tableCell_ColSumm_Hist_After.png

tableCellSlice_UI_v5.png

tableCell_ColSumm_Messages.png

tableCell_RefToTable.png

tableCell_ArrayExpanded.png

dataTableMenu_v2.png

tableCell_summaryTableHeaders_v4.png

tableCellSlice_UI_v8.png

tableCellSort_UI_v6.png

chinook.db

tableCellColumnsOnly.png

tableCellUnnamed_UI_v8.png

selectDataSourceaapl.png

selectATableList_v3.png

tableCellPopulated_v2.png

tableCellNameArea_v2.png

myTableFilter_v2.png

myTableColumns_v2.png

myTableSort_v2.png

myTableSlice_v2.png

sliceFromTo.png

tableCell_RefToTable_v3.png

tableCell_ArrayExpanded_v3.png

tableCell_ColSumm_Messages_v2.png

tableCellRowHover_v4.png

convertToSQL_v4.png

convertedSQLCell_v3.png

dataTableMenu_v6.png

selectADataSource_v3.png

bestPictureNomineesCell.png

tableCellColumnsMenu.png

tableCellColumnsShowAll.png

connectedDatabases_v2.png

addDatabaseButton_v2.png

selectATable_v4.png

summaryTableHeadersOnly.png

summaryTableCanada.png

tableCellHistogramBefore.png

tableCellHistogramAfter.png

closeCellArrow_v2.png

adelieGentoo.png

adelieGentooFilter.png

flipperLengthHistogramAll.png

flipperLengthHistogramOneBar.png

flipperLengthNaN.png

histogramSelectionRange.mov

nullSign.png

penguinsRowInteractivity.png

summaryChartHeadersPenguins.png

summaryChartAdelieOnly.png

convertedSQLCell@2.png

convertToSQL@1.png

tableCellCreatedColumnEditor2@2.png

columnDerivationBadColumnName.png

columnDerivationRuntimeError1.png

columnDerivationRuntimeError2.png

tableCellCreateColumnButton.png

tableCellCreateColumnError.png

tableCellCreatedColumn.png

tableCellCreatedColumnEditorReopen@1.png

example

bestPictureNominees

showHideSection

columnDerivation