@financial-times/o-table/origami.json

Provides styling and behvaiour for tables across FT products.

{
	"origamiType": "component",
	"origamiVersion": "2.0",
	"brands": [
		"core",
		"internal",
		"whitelabel"
	],
	"support": "https://github.com/Financial-Times/origami/issues/new?labels=o-table,components",
	"supportContact": {
		"email": "origami.support@ft.com",
		"slack": "financialtimes/origami-support"
	},
	"supportStatus": "active",
	"browserFeatures": {
		"required": [
			"Element.prototype.closest",
			"IntersectionObserver",
			"IntersectionObserverEntry"
		]
	},
	"demosDefaults": {
		"js": "demos/src/demo.js",
		"sass": "demos/src/demo.scss"
	},
	"demos": [
		{
			"title": "Basic",
			"name": "basic",
			"template": "demos/src/basic.mustache",
			"documentClasses": "o-table-demo-constrain",
			"description": ""
		},
		{
			"title": "Compact",
			"name": "compact",
			"template": "demos/src/basic.mustache",
			"data": {
				"modifierClass": "o-table--compact"
			},
			"documentClasses": "o-table-demo-constrain",
			"description": ""
		},
		{
			"title": "Caption and footnote",
			"name": "captions",
			"template": "demos/src/basic.mustache",
			"data": {
				"showCaption": true,
				"showFooter": true
			},
			"documentClasses": "o-table-demo-constrain",
			"description": "Caption elements may include flow content such as a heading, this demo uses o-typography to add a h2. The footer may also include any flow content, but in this case uses the footnote class to style a source."
		},
		{
			"title": "Row headings",
			"name": "row-headings",
			"brands": [
				"internal"
			],
			"documentClasses": "o-table-demo-constrain",
			"template": "demos/src/row-headings.mustache",
			"description": ""
		},
		{
			"title": "Responsive Overflow",
			"name": "responsive-overflow",
			"template": "demos/src/base.mustache",
			"data": {
				"tableType": "overflow"
			},
			"documentClasses": "o-table-demo-constrain",
			"description": "Open demo and shrink browser to preview. On small viewports this table overflows and may be scrolled left/right. This demo includes the optional row stripes from the previous demo."
		},
		{
			"title": "Responsive Scroll",
			"name": "responsive-scroll",
			"template": "demos/src/base.mustache",
			"data": {
				"tableType": "scroll"
			},
			"documentClasses": "o-table-demo-constrain",
			"description": "Open demo and shrink browser to preview. This table moves headers into the first column on small viewports. The headers stick to the left edge as the table data is scrolled. This demo includes the optional row stripes from the previous demo."
		},
		{
			"title": "Responsive Flat",
			"name": "responsive-flat",
			"template": "demos/src/base.mustache",
			"data": {
				"tableType": "flat"
			},
			"documentClasses": "o-table-demo-constrain",
			"description": "Open demo and shrink browser to preview. Each entry in the flat table is shown individually with headers on small viewports. This demo includes the optional row stripes from the previous demo."
		},
		{
			"title": "Multiple Columns",
			"name": "multiple-columns-responsive-overflow",
			"template": "demos/src/base.mustache",
			"data": {
				"tableType": "overflow",
				"multipleHeaderRows": true
			},
			"hidden": true,
			"documentClasses": "o-table-demo-constrain",
			"description": "Multiple heading rows in a responsive-overflow table are partially supported. Styles are not supported yet. https://github.com/Financial-Times/o-table/issues/255"
		},
		{
			"title": "Expanding Table",
			"name": "expanding",
			"template": "demos/src/expanding.mustache",
			"data": {
				"expanded": "false"
			},
			"description": "Open demo and shrink browser to preview. Responsive Overflow tables may be configured to expand/contract."
		},
		{
			"title": "Expanding Table With Arrow Dock",
			"name": "expanding-dock",
			"template": "demos/src/expanding.mustache",
			"data": {
				"expanded": "true"
			},
			"documentClasses": "o-table-demo-pad",
			"hidden": true,
			"description": "Open demo and shrink browser to preview. When expanding Responsive Overflow tables are tall and can be scrolled past, the left/right arrows \"dock\" next to the \"show more\" expand button."
		},
		{
			"title": "Sorting",
			"name": "sorting",
			"template": "demos/src/sorting.mustache",
			"description": "This demo shows sorting columns of various data types, including FT style dates, times, and abbreviated numbers. The demo also shows a column with sort disabled."
		},
		{
			"title": "Sorting Disabled",
			"name": "sorting-disabled",
			"template": "demos/src/sorting-disabled.mustache",
			"description": "This demo shows how to disable sorting on an entire table."
		},
		{
			"title": "Row Stripes",
			"name": "row-stripes",
			"template": "demos/src/basic.mustache",
			"data": {
				"modifierClass": "o-table--row-stripes",
				"isStriped": true
			},
			"documentClasses": "o-table-demo-constrain",
			"description": "Adds a modifier class to make alternate table rows striped. An alternative to lined tables."
		},
		{
			"title": "Vertically centre",
			"name": "cell-styles",
			"template": "demos/src/cell-styles.mustache",
			"documentClasses": "o-table-demo-constrain",
			"description": ""
		},
		{
			"title": "Filter with a select box",
			"name": "filter-select",
			"data": {
				"tableId": "fruit-table",
				"showFilter": true,
				"showSelectFilter": true,
				"tableType": "overflow"
			},
			"template": "demos/src/base.mustache",
			"description": "This demo shows a table with columns which may be filtered by selecting from a dropdown of given value."
		},
		{
			"title": "Filter with a text input",
			"name": "filter-input",
			"data": {
				"tableId": "fruit-table",
				"showFilter": true,
				"showTextFilter": true,
				"tableType": "overflow"
			},
			"template": "demos/src/base.mustache",
			"description": "This demo shows a table with columns which may be filtered by searching for a specified value."
		},
		{
			"title": "Huge sortable table",
			"name": "huge",
			"data": {
				"tableType": "overflow"
			},
			"template": "demos/src/huge.mustache",
			"description": "A huge, sortable, expandable table - useful to test sort performance.",
			"hidden": true
		},
		{
			"title": "Pa11y",
			"name": "pa11y",
			"template": "demos/src/pa11y.mustache",
			"hidden": true,
			"description": "Highlight accessibility issues."
		}
	]
}