diff --git a/lib/public/components/Table/content.js b/lib/public/components/Table/content.js index 5e94444019..49b6bbf0a0 100644 --- a/lib/public/components/Table/content.js +++ b/lib/public/components/Table/content.js @@ -73,8 +73,12 @@ const content = (data, keys, params, model) => { return h('tbody', data.map((entry) => { const rowId = `row${entry[idKey]}`; - return h(`tr#${rowId}`, params(entry), Object.entries(keys) - .map(([key, value]) => row(value, entry[key], rowId, model))); + return h(`tr#${rowId}`, params(entry), Object.entries(keys).reduce((accumulator, [key, value]) => { + if (value.visible) { + accumulator.push(row(value, entry[key], rowId, model)); + } + return accumulator; + }, [])); })); }; diff --git a/lib/public/components/Table/headers.js b/lib/public/components/Table/headers.js index 8d40369be8..90312d5060 100644 --- a/lib/public/components/Table/headers.js +++ b/lib/public/components/Table/headers.js @@ -18,9 +18,12 @@ import { h } from '/js/src/index.js'; * @param {Object} keys The full collection of API keys and their corresponding header values * @return {vnode} An array of rows containing all given header values with specific cell sizes */ -const headers = (keys) => h('thead', h('tr', Object.values(keys).map((value) => { - const size = value.size || 'cell-m'; - return h(`th.${size}`, { scope: 'col' }, value.name); -}))); +const headers = (keys) => h('thead', h('tr', Object.values(keys).reduce((accumulator, value) => { + if (value.visible) { + const size = value.size || 'cell-m'; + accumulator.push(h(`th.${size}`, { scope: 'col' }, value.name)); + } + return accumulator; +}, []))); export default headers; diff --git a/lib/public/components/Table/index.js b/lib/public/components/Table/index.js index 3e3edf2563..3191fd8dfb 100644 --- a/lib/public/components/Table/index.js +++ b/lib/public/components/Table/index.js @@ -15,19 +15,6 @@ import { h } from '/js/src/index.js'; import headers from './headers.js'; import content from './content.js'; -/** - * Selectively removes the API keys based on their visibility value - * @param {Object} keys The full collection of API keys and their corresponding header values - * @returns {Object} A filtered collection of keys based on visibility - */ -const filterKeysByVisibility = (keys) => { - Object.entries(keys).forEach(([key, value]) => { - if (!value.visible) { - delete keys[key]; - } - }); -}; - /** * Renders the table * @param {Array} data An object array, with every object representing a to be rendered row @@ -36,12 +23,9 @@ const filterKeysByVisibility = (keys) => { * @param {Object} model The global model object * @returns {vnode} Return the total view of the table to rendered */ -const table = (data, keys, params = () => null, model) => { - filterKeysByVisibility(keys); - return h('table.table.table-hover.shadow-level1', [ - headers(keys), - content(data, keys, params, model), - ]); -}; +const table = (data, keys, params = () => null, model) => h('table.table.table-hover.shadow-level1', [ + headers(keys), + content(data, keys, params, model), +]); export default table; diff --git a/lib/public/views/Logs/ActiveColumns/index.js b/lib/public/views/Logs/ActiveColumns/index.js index 240b5f3642..c168f1d9c8 100644 --- a/lib/public/views/Logs/ActiveColumns/index.js +++ b/lib/public/views/Logs/ActiveColumns/index.js @@ -22,6 +22,11 @@ import tagsFilter from '../../../components/Filters/tags.js'; * @return {Object} A collection of columns with parameters for the Log table */ const activeColumns = (model) => ({ + id: { + name: 'Entry ID', + visible: false, + primary: true, + }, title: { name: 'Title', visible: true,