3e:null 3f:["$","title",null,{"children":"Table from array of data | binarmaya | Observable"}] 45:T10e2,table = (data,options)=>{ options = Object.assign({}, defaultOptions, options);//merging object please see Mdn re. Object.assign const { sortable, rank, paged, header } = options; //header always true //d are data in the form of either array of Array or array of Object //c are boolean type, true mean we add column no as the row head let status = false let sortKey = undefined; let sortDescending = true;//from biggest to lowest let page = 0; //first we have to check if the data structure is array type if(Array.isArray(data)){status= true} else { return status //else will throw false return } // //if (sortable && rank) { // throw new Error("A table can either be ranked or sortable, but not both"); //} //check if Title exist in key or first column of data , otherwise we will create it automatically //isTitleExist will generate rowTitle, array of Title let {head,body} = checkTitleExistence(data) //debugger; let columns =[] Object.entries(head).forEach(([key, value]) => { //debugger; const opts = {...options.columns[key] , ...{title : value}}; columns.push({ key: key, type: opts.type || typeof body[0][key], options: opts }); }); //debugger; //let CopyOfData = data.slice() function bake() { if (sortKey) { body = body.slice().sort((a, b) => { let as = a[sortKey]; let bs = b[sortKey]; // make this sort stable if (as == bs) return JSON.stringify(a).localeCompare(JSON.stringify(b)); let res = as > bs ? 1 : as < bs ? -1 : 0; if (sortDescending) res = -res; return res; }); } let offset = page * paged; let rows = body.slice(offset, offset + (paged || body.length)); let pages = paged ? Math.ceil(body.length / paged) : 1; let tableName = Object.keys({data})[0] return html`

${colGroup(head,rank)} ${ options.header === false ? `` : html` ${rank ? html`` : ""} ${columns.map(c => { return th(c, sortKey, sortDescending, sortable); })} ` } ${rows.map( (row, i) => { //debugger; return ( html` ${rank ? html`` : ""} ${columns.map(c => { debugger; let displayValue = (c.options.formatter || identity)( row[c.key], i, row ); if ( displayValue instanceof window.HTMLElement && displayValue.tagName == "TD" ) { return displayValue; } return html``; })} `) } )}

No.
${offset + i + 1}	${displayValue}

${ pages > 1 ? html`` : "" } ${tableStyle(tableName)}

`; } //debugger; let dom = bake(); function rerender() { dom.firstChild.remove(); dom.appendChild(bake().firstChild); } dom.addEventListener("click", e => { if (e.target.tagName === "TH" && sortable) { if (sortKey == e.target.dataset.key) { sortDescending = !sortDescending; } sortKey = e.target.dataset.key; //debugger; rerender(); } if (e.target.tagName === "BUTTON") { if (e.target.dataset.action) { switch (e.target.dataset.action) { case "next": page++, rerender(); break; case "previous": page--, rerender(); break; } } else if (e.target.dataset.page) { (page = parseInt(e.target.dataset.page)), rerender(); } } }); return dom }46:T591,checkTitleExistence =(data)=>{ // This is important thing as all of the data in the row must be consistent // if keys are string than it is the title // otherwise we should compare the content at index 0 and index 1. // if the content type are different ie. between string and number than it is eligible to be a title let r0 = data[0] let rowTitle = [] let headKeys = {} let newdata = undefined //debugger; let title = false // assuming there is not title in row 1. if(Array.isArray(r0)){//if r0 are in the form of array than keys are the indexs let r1 = data[1] let i = 0 title = r0.some(e=>{ let bol = typeof r1[i]!== typeof e i++ //debugger; return bol }) if(title){// jika terdapat title pada row 0 maka pisahkan row 0 dengan real data setelah row 0 rowTitle= r0.map((e,i)=>{ //debugger; headKeys[i]=`${e}`//.split(/\s+/).join('')}`//this automated title created based on keys }) //debugger; newdata = data.slice(1) } else { //debugger; rowTitle = r0.map((e,i)=>{ //debugger; headKeys[i]=`c${e}`//.split(/\s+/).join('')}`//this automated title created based on keys }) } } else if (isObject(r0)){ headKeys = invert(r0) //rowTitle = Object.keys(r0).map(e=>e.split(/\s+/).join('')) //debugger } return { head:headKeys, body:newdata ||data } }47:[] 43:{"id":"8c5c9a01ba0f808f","slug":"table-from-array-of-data","title":"Table from array of data","thumbnail":"a15d245eddc7e42cc21fc5616b177b24c8115aba2e374c435484c90211059f9a","access_level":"public","create_time":"$D2020-09-09T15:40:46.907Z","update_time":"$D2021-01-10T08:50:35.072Z","view_time":null,"first_public_time":"$D2020-09-10T02:25:59.581Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"c2128fd74bbc32eb","login":"binarmaya","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60e192fcf5564319c76497a81fea4ba9f8013d2de90bcad3b62e68e008003907","tier":"starter_2024","bio":""},"version":485,"publish_version":485,"role":null,"authored":false,"authors":[{"type":"individual","id":"72bf76a3ed4ecf8c","login":"binarmaya","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60e192fcf5564319c76497a81fea4ba9f8013d2de90bcad3b62e68e008003907","tier":null,"bio":""}],"members":[{"type":"individual","id":"72bf76a3ed4ecf8c","login":"binarmaya","name":"","avatar_url":"https://avatars-next.observableusercontent.com/60e192fcf5564319c76497a81fea4ba9f8013d2de90bcad3b62e68e008003907","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":{"id":"4603770642f44a57","slug":"usefull-library","title":"Usefull Library","owner":{"id":"c2128fd74bbc32eb","login":"binarmaya","name":""}},"type":"notebook","body":{"titling":"auto","title":"Table from array of data","cells":[{"id":0,"value":"md`# Table from array of data`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md` Lets say we have a 2 dimensional of data structured in **array of Array** like in **Data_1**. And we want to make it human readable by displaying it into a fancy table. In the first example we have data without header or information of what is the title for its column or row now. By calling **table(Data_1)** we can get table as per expected below.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"md` You can use the function below to visualized your data. You **can even add header** by setting \\`\\`\"rank\": true\\`\\` and **make the table sortable** by setting \\`\\`\"sortable\":true\\`\\`.\n\nJust import with code below:\n~~~ js\nimport {table} from '@binarmaya/table-from-array-of-data'\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":279,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md` Another feature are **we can formating the value** using d3.format by adding formatter function into columns property in options. The example on how to do this can be seen in my notebook at https://observablehq.com/@binarmaya/latest-covid-19-data-indonesia`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"Data_1 = [[0,1,2,3],[1,2,3,4],[2,3,4,5]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":153,"value":"table(Data_1,{\n sortable: true,\n rank: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"md` This is just an example of data that is not compatible with **Table Function** written in this notebook. Table will returning false value.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Data_2 = 'fake data'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"table(Data_2,{\n sortable: true,\n rank: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":143,"value":"md` *Data_3* is other data type that is compatible with **Table Function**. This is **array of Object** data type. Array of Object that are parsed from csv data by D3 are also welcome.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"Data_3 = [{'col1':0, 'col2':1,'col3':2},\n {'col1':1, 'col2':2,'col3':3},\n {'col1':3, 'col2':\"bb\",'col3':4}]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"table(Data_3,{\n sortable: true,\n rank: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"md` This type array of Object are not yet compatible with **Table Function**. Some of cells will returning *undefined* value. You can also add column no by setting the second paremeter as *true*`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"Data_4 = [{'col1':0, 1:1 ,'col3':3},3,[4,5,6]]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"table(Data_4,{\n sortable: true,\n rank: true}) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"Data_5 = [['title 1','title 2','title 3','title 4'],['yes',2,3,4],[2,3,4,5]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":212,"value":"table(Data_5,{\n sortable: true,\n rank: false})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":294,"value":"NewTable = table(Data_5, {\n sortable: true,\n rank: true})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":284,"value":"md` DefaultOptions will set style and number of maximum row per page`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":280,"value":"defaultOptions = ({ columns: {}, style: 'normal', paged: 25, rows: false, header: true })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"$46","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":299,"value":"function isObject(obj) {\n return obj === Object(obj);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":329,"value":"th = (c, sortKey, sortDescending, sortable) => {\n let {\n options: { title }\n } = c;\n //debugger;\n if(!isNaN(c.key))c.key = c.key.toString();\n //debugger;\n let sortIndicator = sortKey && sortDescending ? \"↑\" : \"↓\";\n let arrow = html``;\n let displayedTitle = title !== undefined ? title : c.key;\n return c.type === \"number\"\n ? html`\n ${arrow} ${displayedTitle}\n `\n : html`\n ${displayedTitle} ${arrow}\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":333,"value":"identity = i => i","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":373,"value":"colGroup = (head,rank)=>{\nreturn (\n`\n \n`\n)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":352,"value":"tableStyle =(tableName,coWidthAuto = ' .coWidthAuto {width:auto;}')=> {\n //debugger;\n \n return (\n ``)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":435,"value":"invert = function (obj) {\n\n var new_obj = {};\n\n for (const [key,val] of Object.entries(obj)) {\n //debugger;\n new_obj[key] = key;\n }\n\n return new_obj;\n};","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":359,"value":"TableStyle = tableStyle('TableName')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"d3 = require('d3@5')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W47","stdlib":"1"}} 44:"$43:body"