Table-Moderno

A simple, powerful, and modern implementation of tables for the web.

Demo

Releases

Installation

Requirements

• jQuery version 3.x
• position: sticky browser support is required to enable sticky headers and columns.

Clone

Clone the repository and import table-moderno.js and table-moderno.css into your project

OR

CDN

<!-- Always get the latest version -->
<!-- Not recommended for production sites! -->
<script src="https://cdn.jsdelivr.net/gh/an23lm/table-moderno/dist/table-moderno.js"></script>
<link
	rel="stylesheet"
	type="text/css"
	href="https://cdn.jsdelivr.net/gh/an23lm/table-moderno/dist/table-moderno.css"
/>

<!-- Get minor updates and patch fixes within a major version -->
<script src="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@{major-version-number}/dist/table-moderno.js"></script>
<link
	rel="stylesheet"
	type="text/css"
	href="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@{major-version-number}/dist/table-moderno.css"
/>

<!-- Get patch fixes within a minor version -->
<script src="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@{major-version-number}.{minor-version-number}/dist/table-moderno.js"></script>
<link
	rel="stylesheet"
	type="text/css"
	href="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@{major-version-number}.{minor-version-number}/dist/table-moderno.css"
/>

<!-- Get a specific version -->
<script src="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@{major-version-number}.{minor-version-number}.{patch-number}/dist/table-moderno.js"></script>
<link
	rel="stylesheet"
	type="text/css"
	href="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@{major-version-number}.{minor-version-number}.{patch-number}/dist/table-moderno.css"
/>

Example

Get version 1 with latest minor version and patch

<script src="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@1/dist/table-moderno.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/an23lm/table-moderno@1/dist/table-moderno.css">

Note: It is important to get the same version for both .js and .css

Usage

Example

Clone the repository and open demo1.html in the demo folder with your favourite browser.

Configuration

Default Configuration

{
    defaultWidth: 300,
    widthByColumn: [],
    scrollBarType: "default",
    stickHeader: true,
    stickColumnsLeft: [1],
    stickColumnsRight: [6],
    singleLineRows: false,
    highlightHeaderColor: true,
    highlightBodyColor: true,
    tooltip: true,
    convertToLocaleString: false,
    locale: 'en-US',
    maximumFractionDigits: 2,
    lazyLoad: false,
    lazyLoadTrigger: 75,
};

• defaultWidth: All columns are set to default width unless overridden by widthByRow
• widthByColumn: Set column-wise width starting from the left
• scrollBarType: Can be set to default and always
  • default: Browser default
  • always: Always show horizontal and vertical scrollbar (displayed outside of bounds moderno-table-wrapper)
• stickHeader: Makes the header sticky (header freeze)
• stickColumnsLeft: Specify array of column numbers that need to stick to the left side of the table (column freeze)
• stickColumnsRight: Specify array of column numbers that need to stick to the right side of the table (column freeze)
• singleLineRows: Any data overflowing to a new line will be hidden.
• highlightHeaderColor: Enable hover and select for header cells
• highlightBodyColor: Enable hover and select for body cells.
• tooltop: Works along with singleLineRows. If any overflowing data is clipped, then a tooltip is appear over hover.
• convertToLocaleString: Display numbers with commas and decimal point placed according to your region. Eg: currency.
• locale: Your locale setting
• maximumFractionDigits: Number of digits visible after the decimal point.
• lazyLoad: Enable or disable lazy loading.
• lazyLoadTrigger: Percentage at which the callback is triggered to insert new data.

Default values will be assumed for unspecified keys.

Specify your own default values by overriding the TableModerno.default_config variable.

HTML

Create a div with the class moderno-table-wrapper with a unique id following the template below:

<div class="moderno-table-wrapper" id="table1">
	<div class="moderno-table">
		<div class="moderno-table-header">
			<div class="moderno-table-row">
				<div class="moderno-table-item">ID</div>
				<div class="moderno-table-item">Name</div>
				<div class="moderno-table-item">Email</div>
				<div class="moderno-table-item">Phone</div>
				<div class="moderno-table-item">Profession</div>
				<div class="moderno-table-item">Hobbies</div>
			</div>
		</div>
		<div class="moderno-table-body">
			<div class="moderno-table-row">
				<div class="moderno-table-item">1</div>
				<div class="moderno-table-item">Patrick</div>
				<div class="moderno-table-item">[email protected]</div>
				<div class="moderno-table-item">+1800-krusty-krab</div>
				<div class="moderno-table-item">
					Uh, that's the name of the restaurant
				</div>
				<div class="moderno-table-item">Sleeping</div>
			</div>
		</div>
	</div>
</div>

CSS

#table1 {
	height: /* height of your table */ ;
	width: /* width of your table */ ;
}

JavaScript

Insert the following script at the end of the body tag

const config = {
	scrollBarType: "always",
	widthByColumn: [100, 400, 500, 100, 100, 100],
	stickColumnsLeft: [1],
	stickColumnsRight: [4],
};
var moderno = new TableModerno("table1", config);

Populate your table with JS Objects

• Create an attribute - data-key on the header columns as shown below.
• The value of the data-key attribute should represent the name of the key on the js object. The corresponding value of the key will be displayed in that column.

Example

<div class="moderno-table-wrapper" id="table1">
	<div class="moderno-table">
		<div class="moderno-table-header">
			<div class="moderno-table-row">
				<div class="moderno-table-item" data-key="id">ID</div>
				<div class="moderno-table-item" data-key="name">Name</div>
				<div class="moderno-table-item" data-key="mail">Email</div>
				<div class="moderno-table-item" data-key="ph">Phone</div>
				<div class="moderno-table-item" data-key="prof">Profession</div>
				<div class="moderno-table-item" data-key="hobbs">Hobbies</div>
			</div>
		</div>
		<div class="moderno-table-body">
			<!-- body will be loaded from js object -->
		</div>
	</div>
</div>

const config = {
	scrollBarType: "always",
	widthByColumn: [100, 400, 500, 100, 100, 100],
	stickColumnsLeft: [1],
	stickColumnsRight: [4],
};
var moderno = new TableModerno("table1", config);
// newData is an array of objects to be displayed on `table1`
// newData has 2 rows.
// Each row is represented by an object.
const row1 = {
	id: 1,
	name: "SquarePants",
	mail: "[email protected]",
	ph: "+1800-partick",
	prof: "pineapple",
	hobbs: "ff?",
};
const row2 = {
	id: 2,
	name: "Homer",
	mail: "[email protected]",
	ph: "+1800-doh",
	prof: "springfield",
	hobbs: "gg?",
};
const newData = [row1, row2];
moderno.reloadTableWithData(newData);

Customization

The following CSS variables can be set to make your table fit your theme.

The CSS variables should be created in the :root tag, and should be linked after table-moderno.css to override the default values.

Default Theme Values

:root {
	--moderno-background-color: #ffffff;
	--moderno-border-color: #434343;

	/* header colors */
	--moderno-header-color: #113537;
	--moderno-header-text-color: #f3f3f3;

	/* body colors */
	--moderno-body-odd-row-color: #ffead0;
	--moderno-body-even-row-color: #a8b5b6;
	--moderno-body-odd-row-text-color: #434343;
	--moderno-body-even-row-text-color: #f3f3f3;

	/* fonts */
	--moderno-header-font-family: -apple-system, system-ui, BlinkMacSystemFont,
		Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--moderno-header-font-weight: 500;
	--moderno-header-font-size: 1.1em;

	--moderno-body-font-family: -apple-system, system-ui, BlinkMacSystemFont,
		Roboto, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--moderno-body-font-weight: 300;
	--moderno-body-font-size: 1em;

	/* hover colors */
	--moderno-header-hover-color: #96616b;
	--moderno-header-hover-text-color: #f3f3f3;
	--moderno-body-hover-color: #b28c93;
	--moderno-body-hover-text-color: #f3f3f3;

	/* highlight colors */
	--moderno-header-highlight-color: #f889a2;
	--moderno-header-highlight-text-color: #434343;
	--moderno-body-highlight-color: #f996ac;
	--moderno-body-highlight-text-color: #434343;

	/* center content */
	--moderno-table-item-vertical-center: center; /* flex properties - flex-start, center, flex-end */
	--moderno-table-item-horizontal-center: center; /* flex properties - flex-start, center, flex-end */
	--moderno-table-item-text-align: justify; /* text-align properties - use justify or none */
}

Example

YourTheme.css

:root {
	--moderno-header-color: teal;
	--moderno-header-text-color: black;
}

Lazy Loading

The new big feature in v1.5.0 is drum roll please lazy loading!

• Two new config keys added -
  • lazyLoad (Boolean) default: false - Enable or disable lazy loading.
  • lazyLoadTrigger (Number) default: 75- The percentage at which the callback is triggered to add new data.
• registerLazyLoadTriggerCallback(callback) callback: function - The callback function is invoked when the lazyLoadTrigger threshold is reached. The callback function is invoked with one parameter - callback(this.scrollDoneLoad.bind(this)), which is also a callback. This parameter function should be invoked when the new data is done loading and is inserted into the table. Optionally, scrollDoneLoad can be directly called on the table object.
• scrollDoneLoad - Function is used to indicate that a new set of data from a lazy load is inserted. It is crucial to call this function after lazy loading is done for the operation of lazy load trigger callback.

Documentation

TableModerno

Kind: global class

• TableModerno
  • new TableModerno(id, n_config)
  • .initHeaderDefaultEventResponders()
  • .initLoadingIndicator()
  • .initSortingView()
  • .initBodyDefaultEventResponders()
  • .setScrollBarType(type)
  • .toggleStickyHeader(flag)
  • .registerStickyColumnsLeft(columns)
  • .registerStickyColumnsRight(columns)
  • .openSortView()
  • .closeSortView()
  • .addToSortList()
  • .setSortDirection()
  • .applySortList()
  • .sort()
  • .scrollEventResponderOnLeft(event)
  • .scrollEventResponderOnRight(event)
  • .calculateWidthForColumns(widths)
  • .reloadTableWithData(data)
  • .appendData(data)
  • .getRowString(row) ⇒ string
  • .getHeaderColumnDataKeys() ⇒ Array(string)

new TableModerno(id, n_config)

Init the table.

Param	Type	Description
id	string	id of div with class moderno-table-wrapper to create table on
n_config	Object	User configuration for table, refer TableModerno.default_config for default config

tableModerno.initHeaderDefaultEventResponders()

Register hover and click events on moderno-table-headers moderno-table-items

Kind: instance method of TableModerno

tableModerno.initLoadingIndicator()

Init loading indicator

Kind: instance method of TableModerno

tableModerno.initSortingView()

Init sorting view

Kind: instance method of TableModerno

tableModerno.initBodyDefaultEventResponders()

Register hover and click events on moderno-table-bodys moderno-table-rows

Kind: instance method of TableModerno

tableModerno.setScrollBarType(type)

Set table's scroll bar type

Kind: instance method of TableModerno

Param	Type	Description
type	string	can either be 'always' or 'default'

tableModerno.toggleStickyHeader(flag)

Toggle sticky header

Kind: instance method of TableModerno

Param	Type	Description
flag	boolean	to toggle on or off sticky header

tableModerno.registerStickyColumnsLeft(columns)

Register the columns to stick to the left and register scroll responder.

Kind: instance method of TableModerno

Param	Type	Description
columns	Array(int)	to toggle on or off sticky columns

tableModerno.registerStickyColumnsRight(columns)

Register the columns to stick to the right and register scroll responder.

Kind: instance method of TableModerno

Param	Type	Description
columns	Array(number)	to toggle on or off sticky columns

tableModerno.openSortView()

Open sorting view

Kind: instance method of TableModerno

tableModerno.closeSortView()

Close sorting view and save or cancel

Kind: instance method of TableModerno

tableModerno.addToSortList()

Add a header to the sort list

Kind: instance method of TableModerno

tableModerno.setSortDirection()

Select sort type for header

Kind: instance method of TableModerno

tableModerno.applySortList()

Apply the sort list

Kind: instance method of TableModerno

tableModerno.sort()

Sort by header

Kind: instance method of TableModerno

tableModerno.scrollEventResponderOnLeft(event)

Handler for scroll left on table wrapper. Registered left sticky elements will be toggled to postition: sticky when appropriate.

Kind: instance method of TableModerno

Param	Type	Description
event	Object	Scroll event

tableModerno.scrollEventResponderOnRight(event)

Handler for scroll right on table wrapper. Registered right sticky elements will be toggled to postition: sticky when appropriate.

Kind: instance method of TableModerno

Param	Type	Description
event	Object	Scroll event

tableModerno.calculateWidthForColumns(widths)

Set the widths of existing .moderno-table-items elements

Kind: instance method of TableModerno

Param	Type	Description
widths	Array(number)	Array of widths of columns from left to right, if not sepecified, default width will be applied

tableModerno.reloadTableWithData(data)

Reload table with new data and re-set widths for new items

Kind: instance method of TableModerno

Param	Type	Description
data	Object	New data to load the table with

tableModerno.appendData(data)

Load more data into table and re-set widths for new items

Kind: instance method of TableModerno

Param	Type	Description
data	Object	New data to load the table with

tableModerno.getRowString(row) ⇒ string

Create a HTML string for new row to be inserted

Kind: instance method of TableModerno
Returns: string - HTML string

Param	Type	Description
row	Object	Object containing the information of row data

tableModerno.getHeaderColumnDataKeys() ⇒ Array(string)

Get the data-key attribute specified in header columns. This attribute holds the key name for the respective column in the JS Object of row data.

Kind: instance method of TableModerno
Returns: Array(string) - an array of keys for the respective columns will be returned in order from left to right

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

GNU GPLv3