Typography

Tables

Basic table data

Users can add tables now to their own documents within the system using the Redator WYSIWYG editor. Many other pages across the system are presenting tabular data, or more frequently, using a table to present many items and their properties together eg. browsing specimens or materials.

The first simple table has a few columns with data and no interactive elements.

SysID	Name	Description	Created at	Added by	Catalog number
12.0023	Small medusa	This line is derivative of Jurkat that is CD4 negative. The cells have contact dependent helper activity.	04/25/2012	Daphne Rosenfeld	DKSJ-00127
12.0025	Irakanje	The tissue donor was a presumed heterozygote for xeroderma pigmentosum	08/14/2012	Daphne Rosenfeld	DKSJ-00127

Note: This table has been left without a width, so should scale to an appropriate size for the content. Table cells (both TD and TH) have CSS width set to 300px and word-wrap enabled so that the line length remains sensible.

Tables with actions

This second table has row selectors and a few actions to contents may be performed: bulk delete and tagging. It has selectable headers on some columns to allow sorting, where that makes sense. On the right is a basic search functionality for data in this whole area, added using a class 'searchable' to the caption.

**Actions:**

Tag

Delete
	SysID	Name	Description	Created at	Added by	Catalog number
	12.0023	Small medusa	This line is derivative of Jurkat that is CD4 negative. The cells have contact dependent helper activity.	04/25/2012	Daphne Rosenfeld	DKSJ-00127
	12.0025	Irakanje	The tissue donor was a presumed heterozygote for xeroderma pigmentosum	08/14/2012	Daphne Rosenfeld	DKSJ-00127

Note: The Table Caption element has been used here to contain the actions as it gets correctly placed at the top and sized to match the fluid table width

This third table allows customisation of columns shown from a wider data set, and the columns may also be rearranged with a drag-and-drop action on the column header blocks. Pagination is possible for larger sets of data.

**Actions:**

Tag

Delete

Customise table

Export
SysID	Name	Description	Created at	Added by	Catalog number
12.0023	Small medusa	This line is derivative of Jurkat that is CD4 negative. The cells have contact dependent helper activity.	04/25/2012	Daphne Rosenfeld	DKSJ-00127
12.0025	Irakanje	This line is derivative of Jurkat	08/14/2012	Daphne Rosenfeld	DKSJ-00127
12.0028	Irakanje	The tissue donor was a presumed heterozygote for xeroderma pigmentosum	08/26/2012	Daphne Rosenfeld	DKSJ-00128
12.0029	Mesocricetus	To make the complete growth medium add fetal bovine serum to a final concentration of 10%	08/28/2012	Daphne Rosenfeld	DKSJ-00129

« Previous
1
2
3
4
Next «

Advanced search

Note: While the table reorganisation is a "cool" feature, it can be annoying or confusing and a recommendation would be have this as an option to be switched on in the 'Customise table' page, but off by default.

2: The long strings eg. gene sequences like GTTATCATGATCTAATCTTCAGTGCAATTAGCTAGGGACATTTAGCTAGC should have the zero-width-space character inserted at regular word sized places, in addition if you want the entire string in the page (for search) but not displayed, truncate with the the css ellipsis.

3: Above about 14 columns the page renderer needs more width for tables - these become horizontal scrollers within the content box currently, but if this seems restrictive, some jQuery work may be required to alter the layout and scroll the whole page horizontally.