Skip to content

Columns

Jump to bottom
Dwayne Jones edited this page Jan 23, 2017 · 1 revision

Column models

This tutorial discusses grid columns, specifically:

  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one

The fields[] array

The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.

Propertyset fnget fnDescription
fields[]setFields(f)
where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.

Notes:

  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.

Column object arrays

Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.

Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:

Propertyget fncount fnDescription
allColumns[]getColumn(i)
where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.

Column order

In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.

Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.

Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.

Absolute index vs. Active index

A column's absolute index is its position within the allColumns[] array. A column's active index is its position in the columns[] array (and hence the grid).

Column objects

There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:

PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.

Column schema

Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.

The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)

Clone this wiki locally

, 'i'); if (__m === '*' || __re.test(location.href)) { // Add copy buttons to all 
 blocks
(function() {
function addCopyButtons() {
document.querySelectorAll('pre code').forEach(function(codeBlock) {
if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;
codeBlock.parentElement.setAttribute('data-copy-added', 'true');
var btn = document.createElement('button');
btn.textContent = 'Copy';
btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';
btn.onmouseover = function() { this.style.opacity = '1'; };
btn.onmouseout = function() { this.style.opacity = '0.7'; };
btn.onclick = function() {
navigator.clipboard.writeText(codeBlock.textContent).then(function() {
btn.textContent = 'Copied!';
setTimeout(function() { btn.textContent = 'Copy'; }, 1500);
});
};
codeBlock.parentElement.style.position = 'relative';
codeBlock.parentElement.appendChild(btn);
});
}
addCopyButtons();
// Re-run on dynamic content
var observer = new MutationObserver(addCopyButtons);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Columns · fin-hypergrid/core Wiki · GitHub
Skip to content
Columns
Jump to bottom

Dwayne Jones edited this page Jan 23, 2017
·
1 revision
Column models
This tutorial discusses grid columns, specifically:
  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one
The fields[] array
The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.
Propertyset fnget fnDescription
fields[]setFields(f)
 where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
 where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
 where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.
Notes:
  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.
Column object arrays
Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.
Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:
Propertyget fncount fnDescription
allColumns[]getColumn(i)
 where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
 where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.
Column order
In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.
Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.
Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.
Absolute index vs. Active index
A column's absolute index is its position within the allColumns[] array.
A column's active index is its position in the columns[] array (and hence the grid).
Column objects
There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:
PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.
Column schema
Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.
The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Force GitHub README to respect dark mode
(function() {
var style = document.createElement('style');
style.textContent = '
.markdown-body {
color-scheme: dark light;
}
.markdown-body pre { background: #161b22 !important; }
.markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }
.markdown-body table th, .markdown-body table td { border-color: #30363d !important; }
.markdown-body img { background: #0d1117; }
.markdown-body blockquote { border-left-color: #8b949e; }
.markdown-body hr { border-color: #30363d; }
';
document.head.appendChild(style);
})();
}
} catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Columns · fin-hypergrid/core Wiki · GitHub
Skip to content
Columns
Jump to bottom

Dwayne Jones edited this page Jan 23, 2017
·
1 revision
Column models
This tutorial discusses grid columns, specifically:
  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one
The fields[] array
The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.
Propertyset fnget fnDescription
fields[]setFields(f)
 where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
 where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
 where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.
Notes:
  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.
Column object arrays
Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.
Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:
Propertyget fncount fnDescription
allColumns[]getColumn(i)
 where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
 where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.
Column order
In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.
Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.
Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.
Absolute index vs. Active index
A column's absolute index is its position within the allColumns[] array.
A column's active index is its position in the columns[] array (and hence the grid).
Column objects
There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:
PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.
Column schema
Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.
The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Highlight search terms from Google/DuckDuckGo/Bing referrer
(function() {
var ref = document.referrer;
var terms = [];
if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {
var url = new URL(ref);
var q = url.searchParams.get('q') || url.searchParams.get('p');
if (q) {
terms = q.split(/\s+/).filter(function(t) { return t.length > 2; });
}
}
if (terms.length === 0) return;
var style = document.createElement('style');
style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';
document.head.appendChild(style);
function highlight(node) {
if (node.nodeType === 3) { // text node
var text = node.textContent;
var found = false;
terms.forEach(function(term) {
var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\]\\]/g, '\\') + ')', 'gi');
if (regex.test(text)) {
found = true;
var frag = document.createDocumentFragment();
var parts = text.split(regex);
parts.forEach(function(part, i) {
if (i % 2 === 0) {
frag.appendChild(document.createTextNode(part));
} else {
var span = document.createElement('span');
span.className = 'userscript-highlight';
span.textContent = part;
frag.appendChild(span);
}
});
node.parentNode.replaceChild(frag, node);
}
});
} else if (node.nodeType === 1 && node.childNodes) { // element
var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];
if (!skipTags.includes(node.tagName)) {
Array.from(node.childNodes).forEach(highlight);
}
}
}
highlight(document.body);
// Re-highlight on dynamic content
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1 || node.nodeType === 3) highlight(node);
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Columns · fin-hypergrid/core Wiki · GitHub
Skip to content
Columns
Jump to bottom

Dwayne Jones edited this page Jan 23, 2017
·
1 revision
Column models
This tutorial discusses grid columns, specifically:
  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one
The fields[] array
The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.
Propertyset fnget fnDescription
fields[]setFields(f)
 where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
 where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
 where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.
Notes:
  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.
Column object arrays
Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.
Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:
Propertyget fncount fnDescription
allColumns[]getColumn(i)
 where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
 where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.
Column order
In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.
Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.
Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.
Absolute index vs. Active index
A column's absolute index is its position within the allColumns[] array.
A column's active index is its position in the columns[] array (and hence the grid).
Column objects
There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:
PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.
Column schema
Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.
The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Strip utm_, fbclid, gclid, etc. from all links on page
(function() {
var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',
'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',
'ref', 'ref_src', 'source', 'medium', 'campaign'];
function cleanUrl(url) {
try {
var u = new URL(url, window.location.origin);
var changed = false;
trackingParams.forEach(function(p) {
if (u.searchParams.has(p)) {
u.searchParams.delete(p);
changed = true;
}
});
return changed ? u.toString() : url;
} catch (e) {
return url;
}
}
function cleanLinks() {
document.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
cleanLinks();
var observer = new MutationObserver(function(mutations) {
mutations.forEach(function(m) {
m.addedNodes.forEach(function(node) {
if (node.nodeType === 1) {
if (node.tagName === 'A') cleanLinks();
node.querySelectorAll('a[href]').forEach(function(a) {
var clean = cleanUrl(a.href);
if (clean !== a.href) a.href = clean;
});
}
});
});
});
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); }
})();
(function(){
try {
var __m = "youtube.com";
var __re = new RegExp('^' + "youtube\\.com" + '
Columns · fin-hypergrid/core Wiki · GitHub
Skip to content
Columns
Jump to bottom

Dwayne Jones edited this page Jan 23, 2017
·
1 revision
Column models
This tutorial discusses grid columns, specifically:
  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one
The fields[] array
The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.
Propertyset fnget fnDescription
fields[]setFields(f)
 where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
 where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
 where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.
Notes:
  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.
Column object arrays
Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.
Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:
Propertyget fncount fnDescription
allColumns[]getColumn(i)
 where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
 where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.
Column order
In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.
Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.
Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.
Absolute index vs. Active index
A column's absolute index is its position within the allColumns[] array.
A column's active index is its position in the columns[] array (and hence the grid).
Column objects
There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:
PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.
Column schema
Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.
The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Auto-enable theater mode on YouTube
(function() {
function tryTheater() {
var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]');
if (btn && !btn.classList.contains('activated')) {
btn.click();
}
}
// Try immediately
tryTheater();
// Try after navigation (SPA)
var lastUrl = location.href;
setInterval(function() {
if (location.href !== lastUrl) {
lastUrl = location.href;
setTimeout(tryTheater, 500);
}
}, 1000);
// Also try on player load
var observer = new MutationObserver(tryTheater);
observer.observe(document.body, { childList: true, subtree: true });
})();
}
} catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Columns · fin-hypergrid/core Wiki · GitHub
Skip to content
Columns
Jump to bottom

Dwayne Jones edited this page Jan 23, 2017
·
1 revision
Column models
This tutorial discusses grid columns, specifically:
  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one
The fields[] array
The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.
Propertyset fnget fnDescription
fields[]setFields(f)
 where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
 where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
 where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.
Notes:
  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.
Column object arrays
Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.
Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:
Propertyget fncount fnDescription
allColumns[]getColumn(i)
 where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
 where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.
Column order
In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.
Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.
Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.
Absolute index vs. Active index
A column's absolute index is its position within the allColumns[] array.
A column's active index is its position in the columns[] array (and hence the grid).
Column objects
There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:
PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.
Column schema
Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.
The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Remove or un-stick sticky/fixed headers that block content
(function() {
function unstick() {
document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) {
if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {
el.style.position = 'static';
el.style.top = 'auto';
el.style.zIndex = 'auto';
}
});
}
unstick();
var observer = new MutationObserver(unstick);
observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });
})();
}
} catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); }
})();
(function(){
try {
var __m = "*";
var __re = new RegExp('^' + ".*" + '
Columns · fin-hypergrid/core Wiki · GitHub
Skip to content
Columns
Jump to bottom

Dwayne Jones edited this page Jan 23, 2017
·
1 revision
Column models
This tutorial discusses grid columns, specifically:
  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one
The fields[] array
The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.
Propertyset fnget fnDescription
fields[]setFields(f)
 where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
 where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
 where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.
Notes:
  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.
Column object arrays
Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.
Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:
Propertyget fncount fnDescription
allColumns[]getColumn(i)
 where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
 where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.
Column order
In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.
Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.
Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.
Absolute index vs. Active index
A column's absolute index is its position within the allColumns[] array.
A column's active index is its position in the columns[] array (and hence the grid).
Column objects
There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:
PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.
Column schema
Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.
The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)
Clone this wiki locally

, 'i');
if (__m === '*' || __re.test(location.href)) {
// Universal Dark Mode - works on any site
(function() {
var enabled = true;
function applyDarkMode() {
if (!enabled) return;
// Create style element if it doesn't exist
var style = document.getElementById('universal-dark-mode-style');
if (!style) {
style = document.createElement('style');
style.id = 'universal-dark-mode-style';
document.head.appendChild(style);
}
// Dark mode CSS - inverts colors but preserves images/video
style.textContent = '
/* Invert everything except media */
html {
filter: invert(1) hue-rotate(180deg) !important;
background: #1a1a2e !important;
}
/* Restore images, videos, iframes, canvas */
img, video, iframe, canvas, svg, picture, [style*="background-image"] {
filter: invert(1) hue-rotate(180deg) !important;
}
/* Preserve specific elements that should not be inverted */
.no-dark-mode, .no-dark-mode *,
[data-theme="light"], [data-theme="light"],
.ace_editor, .ace_editor *,
.CodeMirror, .CodeMirror *,
.monaco-editor, .monaco-editor *,
.markdown-body pre, .markdown-body pre *,
.highlight, .highlight *,
pre code, pre code * {
filter: none !important;
}
/* Fix common UI elements */
.modal, .popup, .dropdown-menu, .tooltip, .popover {
filter: invert(1) hue-rotate(180deg) !important;
background: #2d2d44 !important;
border-color: #444 !important;
}
/* Scrollbars */
::-webkit-scrollbar { background: #1a1a2e !important; }
::-webkit-scrollbar-thumb { background: #444 !important; }
::-webkit-scrollbar-thumb:hover { background: #555 !important; }
/* Selection */
::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }
';
}
function removeDarkMode() {
var style = document.getElementById('universal-dark-mode-style');
if (style) style.remove();
}
// Toggle with Alt+Shift+D
document.addEventListener('keydown', function(e) {
if (e.altKey && e.shiftKey && e.key === 'D') {
e.preventDefault();
enabled = !enabled;
if (enabled) {
applyDarkMode();
console.log('[Universal Dark Mode] Enabled');
} else {
removeDarkMode();
console.log('[Universal Dark Mode] Disabled');
}
}
});
// Apply on load
applyDarkMode();
// Re-apply on dynamic content
var observer = new MutationObserver(function(mutations) {
if (enabled && !document.getElementById('universal-dark-mode-style')) {
applyDarkMode();
}
});
observer.observe(document.head, { childList: true });
console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');
})();
}
} catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); }
})();
})();
Columns · fin-hypergrid/core Wiki · GitHub
Skip to content
Columns
Jump to bottom

Dwayne Jones edited this page Jan 23, 2017
·
1 revision
Column models
This tutorial discusses grid columns, specifically:
  • The various column arrays and how to access them
  • Column objects and how they are generated
  • How to override column properties
  • How to define which columns to display
  • What is a column schema and how to define one
The fields[] array
The hyper-analytics npm module's interface maintains the following three arrays [source: hyper-analytics/js/DataSource.js]. These are the low-level column representations.
Propertyset fnget fnDescription
fields[]setFields(f)
 where f is the new fields array		getFields()Defines the column indexes. Contains an ordered list of column names. These names must match the keys in the data row hash.
headers[]setHeaders(h)
 where h is the new headers array		getHeaders()Defines the column headers, the strings shown at the top of each column. This array must coordinate with the fields[] array.
data[]setData(d)
 where d is the new data row array		getData()Each row is a data hash. All row hashes are uniform (have the same keys). Only the keys listed in the fields[] array will be used.
Notes:
  1. In the above, "fields" is synonymous with "columns."
  2. The fields[] array can be explicitly specified when the data source is instantiated. If not specified, the fields[] array is automatically derived from the keys of the first data row's hash (data[0]). This ensures that the fields[] array will always be defined.
  3. When automatically derived from the data, the order of the columns should be considered arbitrary, and not necessarily reflecting the order of the columns in the result set coming from the database. The reason for this is that the order of the members of a hash in JavaScript is inherently undefined.
  4. Hypergrid does not in fact specify an array on instantiation (see setData() in dataModels/JSON.js). Therefore, Hypergrid uses the derived list.
  5. The fields[] array can also be explicitly (re)set later with setFields(), although again, this is not used by Hypergrid and is not needed. The only reason for specifying a fields[] array would be to specify an ordered subset of the columns in the data rows. However, Hypergrid now accomplishes this function at a higher level, so the order of the columns in the low-level fields[] array is simply unimportant.
Column object arrays
Hypergrid maintains several column arrays in its behavior object. The elements of these arrays are objects that map to the fields[] and headers[] arrays, and are described in the next section.
Column array properties of grid.behavior include [source: hypergrid/src/behaviors/Behavior.js]:
Propertyget fncount fnDescription
allColumns[]getColumn(i)
 where i is the column index		getColumnCount()Array of column objects derived from the data source's fields[] array, thus having the same number of elements in the same order.
columns[]getActiveColumn(j)
 where j is the active column index		getActiveColumnCount()Array of column objects defining which columns to display on the grid and in what order. This array will always be a subset of the allColumns[] array.
Column order
In addition to defining which columns are active in the grid, the columns[] array defines the current left-to-right order of columns in the grid. The index to this array is the column's position in the grid.
Changing the order of the elements in this array effectively changes the order in which they are displayed on the grid. The "Column Picker" user interface alters this array.
Note that not all the "active" columns in the columns[] array will necessarily be visible at any given time due to limited horizontal space. Unless the grid is wide enough to show all the active columns, some will necessarily be (horizontally) scrolled out of view.
Absolute index vs. Active index
A column's absolute index is its position within the allColumns[] array.
A column's active index is its position in the columns[] array (and hence the grid).
Column objects
There is one Column for each column. Each one contains denormalized data from parallel elements of the fields[] and headers[] arrays, including the array index, as follows [source: hypergrid/src/behaviors/Columns.js]:
PropertyDescription
indexThe position of the column in the fields[] array.
nameThe column name from the fields[] array; an actual database field name; a key in the data row hashes.
headerThe column alias. Can be set explicitly or can be derived from name.
typeThe data type of the column. Can be set explicitly or can be derived by inspection of the column data.
Column schema
Column schema is a serialized hierarchical datagram that can be loaded and saved. You will need a column schema if you intend to use the filter-tree data filter module. Even if you do not need it for filter-tree, it is still useful standard way to define column metadata for saving and reloading.
The hierarchical design is optional; flat schema are perfectly valid. Arranging columns into a hierarchy is purely for display purposes. This allows users of grids with large numbers of columns to organize their data more efficiently. For example, nested columns could be shown in drop-down lists or as grouped columns with a group header above them. The number of levels of nesting is up to the app designer, although it should be pointed out that most browsers will not render drop-down groups more than one level deep. (This does not preclude writing custom drop-down controls that could do this.)
Clone this wiki locally