optimal structure for organizing tabular information

I need help determining the most efficient data structure for displaying this user interface: https://i.sstatic.net/pulZv.png

Currently, I am developing in javascript/typescript with Angular and must have the ability to add/remove/update items. Additionally, keep in mind that there will be numerous rows and columns, each containing up to 100 unique items. My current consideration for a data structure is as follows:

var data = new Map<string, Map<string, Set<Item>>>();

In this setup, rowKeyN and columnKeyN are represented by strings, and the Set contains all the items within each cell.

While this data structure may seem complex, it appears to offer the best performance capabilities in my scenario. What are your thoughts on this approach? Thank you in advance.

javascriptangulardictionarytypescriptdata-structures

Answer №1

Stumbled upon a question that led me to discover Guava's Table representation, specifically for Java - where the final result is a List

For more information on Guava's table, click here

In essence: as mentioned in the documentation:

Table<Vertex, Vertex, Double> weightedGraph = HashBasedTable.create();
weightedGraph.put(v1, v2, 4);
weightedGraph.put(v1, v3, 20);
weightedGraph.put(v2, v3, 5);

weightedGraph.row(v1); // yields a Map mapping v2 to 4, v3 to 20
weightedGraph.column(v3); // yields a Map mapping v1 to 20, v2 to 5

In your situation, it would translate to Table<Vertex,Vertex,Array>

While searching for something similar in Typescript, I landed here without success so far. If anyone has seen such an implementation, please share!

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Executing Query Order with AJAX for PHP and MySQL

Currently facing a bit of a perplexing situation. I have implemented a form on my website that allows users to input information into a database... Form <form id="insertbill"> Total <input type="text" id="total" name="total" /><br /&g ...

phpjavascriptmysqlajax

Zurb Foundation's sections have a strange issue where navigating between them introduces unexpected whitespace

I'm feeling frustrated as I try to work with Zurb Foundation sections. I've updated to the latest version 4.3.1. Following the documentation provided here: but encountering strange behavior while navigating through results. Refer to the screen ...

javascripthtmlcsszurb-foundation

Protractor: Configuration file failed to load

Upon the installation of protractor and initiation of selenium webdriver, I encountered an issue while attempting to run the config.js file located in the example folder of protractor. The error message "ERROR loading configuration file config.js" is displ ...

javascriptseleniumprotractor

Master the art of crafting precise searches with Js and Jquery

In my quest to create an expanded search function that allows users to find people not only by their names but also using various combinations, I encountered a challenge. For example, I have a list of players and the following code snippet works fine: ...

javascriptjqueryajax

What is the process for building an interactive quiz using JavaScript?

In the process of creating a quiz, I envision a user interface that presents questions in a "card" format. These questions will include simple yes/no inquiries and some multiple-choice options. As the user progresses through the quiz, their answers will de ...

javascripthtmlvue.js

Updating a Vanilla JS variable within the scope of an Angular JS controller: A step-by-step guide

let num = 1; function increaseCounter() { num++; } angular.module('myapp') .controller('MainCtrl', function($scope) { $scope.b = num; }); I am trying to continuously track the variable num within the scope ...

javascriptangularjs

Developing step code for CucumberJS Scenario Outlines

In my feature file, I have the following scenario outlined for testing colors: Feature: Color feature @test Scenario Outline: Test color Given the first color is <COLOR_ONE> And the second color is <COLOR_TWO> ...

angulartypescriptprotractorcucumber

Activate datepicker upon choosing a symbol

If the symbol field is selected, the datepicker is enabled. If the symbol field is not selected, the datepicker remains disabled. <script src="{{asset('js/libs/jquery.js')}}" crossorigin="anonymous"></script> <link href="https:/ ...

javascriptjqueryajaxdatepickerjquery-ui-datepicker

Icons in IE11 are lagging behind other browsers in terms of rendering and loading speed

In my Angular 5 application, I am using SVG icons across the site. While they load properly in Chrome, Mozilla, and Safari, there seems to be an issue with IE11 where the icons don't load. To address this, I included svgxuse in my pollyfill.ts file. ...

javascriptangularsvgicons

When the page is refreshed, the JWT token mysteriously disappears from the header. How can this issue be resolved

I am currently using Jwt token based authentication with Angular 7 and node.js. When attempting to send a POST request with a Token to the server, everything works fine initially. However, upon reloading the page, I encounter an error on the server side. ...

javascriptnode.jsangularjwttoken

Angular 7 and Spring 5 are being hindered by CORS restrictions

I'm currently working on a project that involves Spring 5 with Spring Security and Angular 7. I am facing an issue while trying to connect the frontend, receiving the following error message. It's worth mentioning that the backend and frontend pr ...

javaangularspringspring-bootspring-mvc

Node.js variable initialization

Here's the issue I'm facing: in this function, I'm attempting to return an array of objects. When I use console.log within the forEach loop, the array is populated as expected. However, just before my return statement, it appears empty. http ...

javascriptnode.jsdiscord.js

What distinctions can be made between Controlled and Uncontrolled Components when using react-hooks-form?

Trying out the React Hooks form, I came across some interesting concepts like controlled and uncontrolled forms. Controlled Form <form onSubmit={handleSubmit(onSubmit)}> <input name="firstName" ref={register({ required: true })} /> ...

javascriptreactjsreact-hook-form

Is there a way to effectively eliminate an array of objects in JavaScript or TypeScript and alter the object structure simultaneously?

I am seeking solutions to restructure an object that has multiple arrays of objects so that I can access the object directly. console.log(value.data.summary[0].data) Instead of accessing arrays in this manner, I want to modify my data structure. Is there ...

javascriptarraystypescriptobject

The THREE.js GLTFLoader is failing to load the 3D model

Hey there, I'm encountering an issue with displaying a 3D model using THREE.js GLTFLoader(). Below is the script I am working with: Here is the HTML file: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

javascripthtmlthree.js3dgltf

Angular Material Table displaying real-time information

Recently, I've delved into Angular and have been experimenting with creating a dynamic table to showcase data. Currently, I have managed to get it partially working with static data. I drew inspiration from this particular example: https://stackblit ...

angulartypescript

Eliminating an element from an array depending on the value of its properties

I need to remove an object from my List array by matching its properties value with the event target ID. Currently, I am using findIndex method to locate the index ID that matches the event.target.id. Below is an example of one of the objects in my list a ...

javascript

How to transform a string into a template in TypeScript

I have a map of templates structured like this: const templateMap = { greeting: `Hello, ${name}`, farewell: `Goodbye, ${name}` } However, I am facing an issue where I need to apply the 'name' variable after defining the map. I came acr ...

typescript

What should be done if an image is not wide enough to stretch it to match the width of the window?

When the image is not full screen, it looks fine but when it's viewed in full screen, there's a white area on the right side which is likely due to the image not being large enough. Is there a way to automatically stretch the image so that its wi ...

javascripthtmlcssimagenext.js

Remove any posts that have a date earlier than the current day

Currently, I am working on a website showcasing events organized by my friend's music label. However, I have run into an issue while attempting to implement an "archiving automation". The code I have tried below is not functioning as expected, as my " ...

javascripthtmlvue.jsnuxt.js