Create a Material UI table featuring an array of rows organized into two columns for easy data visualization

I'm trying to create a table with two columns, each containing multiple rows with varying numbers of entries. Here is an example using material UI table components:

<Table>
    <TableHeader>
      <TableRow>
        <TableHeaderColumn>ID</TableHeaderColumn>
        <TableHeaderColumn>Name</TableHeaderColumn>
        <TableHeaderColumn>Status</TableHeaderColumn>
      </TableRow>
    </TableHeader>
    <TableBody>
      <TableRow>
        <TableRowColumn>1</TableRowColumn>
        <TableRowColumn>John Smith</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>2</TableRowColumn>
        <TableRowColumn>Randal White</TableRowColumn>
        <TableRowColumn>Unemployed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>3</TableRowColumn>
        <TableRowColumn>Stephanie Sanders</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>4</TableRowColumn>
        <TableRowColumn>Steve Brown</TableRowColumn>
        <TableRowColumn>Employed</TableRowColumn>
      </TableRow>
      <TableRow>
        <TableRowColumn>5</TableRowColumn>
        <TableRowColumn>Christopher Nolan</TableRowColumn>
        <TableRowColumn>Unemployed</TableRowColumn>
      </TableRow>
    </TableBody>
  </Table>

Looking for suggestions on how to make this work. Thanks!

javascriptmaterial-designmaterial-uixmltable

Answer №1

If you want to organize person data, one way is to store it in an array and then transform it into a new array consisting of React components that can be displayed:

[...]

let persons = [{
id: 1,
name: 'John Smith',
status: 'Employed' 
}, [...] ];

let rows = persons.map(function(person){
    return (
        <TableRow>
            <TableRowColumn>{person.id}</TableRowColumn>
            <TableRowColumn>{person.name}</TableRowColumn>
            <TableRowColumn>{person.status}</TableRowColumn>
        </TableRow>
    );
});

[...]

render() {
    return (
        <Table>
            <TableHeader>
                <TableRow>
                    <TableHeaderColumn>ID</TableHeaderColumn>
                    <TableHeaderColumn>Name</TableHeaderColumn>
                    <TableHeaderColumn>Status</TableHeaderColumn>
                </TableRow>
            </TableHeader>
           <TableBody>
               {rows}
           </TableBody>
        </Table>
);
[...]

This code snippet hasn't been tested, but it may give you some direction on how to proceed.

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

Is there a way to assign innerHTML values to table cells using PHP?

I'm currently building a website that relies on a database to store information. I have created an array to hold the values retrieved from the database, and now I need to populate a table with these values. Each cell in the table has a numerical ID ra ...

javascriptphphtml

Generating dynamic JSON objects in Node.js

Here is the initial JSON data I have: { "fullName": "abc", "age": 19, ... } I am looking to utilize Node.js in order to add elements from the above JSON to an object called Variables within the following JSON: { &q ...

javascriptnode.jsjson

Nothing is being sent in the Ajax request to PHP

I am experiencing an issue with my AJAX post to PHP as the PHP code is indicating that the post is empty. Strangely, there are no error messages displayed by PHP or in the console. The alert(data) statement at the end of the code retrieves all the HTML con ...

javascriptphpjqueryajaxpost

Unable to access serialized select2 value in asp.net mvc controller

I'm facing a challenge with serializing and passing multiple controls inside a div to a controller via AJAX in my view. One of the fields, SchoolType, is a select2 multi-select dropdown. Model : public class SchoolModel { public string StudentN ...

javascriptajaxasp.net-mvcserializationjquery-select2

Django's "Like" feature with AJAX interaction (duplicate)

Trying to add a like button to my project without reloading the page has been a challenge. I turned to AJAX in JS based on my research, but I'm clueless when it comes to Javascript. Can someone take a look at my code and help me out? Or maybe t ...

javascriptpythonjquerydjangoajax

The problem of heavy images not uploading persists when using Ajax/Jquery, as the FormData appears to

I have encountered an issue while running this code for images. It works perfectly for small images up to 2.5mb each, and the form is supposed to handle a maximum of 8 images. However, when I try to upload images larger than 4mb, or more than one such imag ...

javascriptphpjqueryajax

Personalized Design Incorporating Sections and Sidebars

I need the aside to be positioned on the right side and the section on the left side, both centered in the space. Feel free to check out this link <!DOCTYPE html> <html> <head> <style> #main { width: 800px; margin: 0 auto; } ...

javascripthtmlcsstwitter-bootstrapvisual-studio-2013

Guide on how to submit x-editable input data in a Razor page

When the submit button is clicked, I would like the form to be sent using the post method. Thank you for your assistance. Here is the HTML code: <form method="post" class="form-horizontal editor-horizont ...

javascript.netasp.net-corerazor-pagesx-editable

Finding the index of a parent element using jQuery

<ul class="bullets"> <li><a href="#">item 1</a></li> <li><a href="#">item 2</a></li> <li><a href="#">item 3</a></li> <li><a href="#">item 4</a></li&g ...

javascriptjqueryxhtml

Calculate the total sum of varying values extracted from both the entered text and selected

Currently, I am facing an issue with summing up the value of an input text dynamically changing with a radio button that also changes dynamically. While some aspects are working correctly, there is still something wrong as the sum does not update when expe ...

javascripthtmljqueryformsradio-button

The UseEffect function ceases to function properly upon refreshing the website

I'm currently using ReactJS for a project. I have a form that is intended to serve as the configuration for another form. The structure of this specific form is as follows: const [startingDate, setStartingDate] = useState(); const [endingDate, set ...

javascriptreactjsuse-effect

AngularJS magic: display content with ng-show as objects load

My webapp is built using AngularJS and Firebase for user authentication. Each user has an email in their profile, and I want to show a warning if the email is not set. However, when a user logs in and their email is set, the warning briefly flashes at the ...

javascriptangularjsfirebase

React js experiences a crash when it attempts to re-render with a different number of child elements

When working with react.js, I came across the need for a component that renders a 'tr' with either one or two 'td' elements, depending on its property. Here is an example: var Item = React.createClass({ content: function() { ...

javascripthtmlreactjs

Utilizing API data with Datatable JS framework

I am attempting to display all the data from an API in a DataTable using JS. The structure of my API is as follows: { "Success": { "Meta": { "Id": "124578828", "Action": "ItemList", "Type": "Item" }, "Body": { "TotalI ...

javascriptjqueryjsonapidatatables

The loading spinner feature in the UI Route does not function properly unless the $timeout component is included

In my Angular application that uses UI Router, I have set up subscriptions to the $stateChangeStart and $stateChangeSuccess events. Within these event handlers, I am toggling a controller property called "isLoading" to show or hide a loading indicator outs ...

javascriptangularjsangular-ui-router

(Critical) Comparing AJAX GET Requests and HTTP GET Requests: identifying the true client

When a typical GET request is made through the browser, it can be said that the browser acts as the client. However, who exactly serves as the client in the case of a GET request via AJAX? Although it still occurs within the browser, I am intrigued to delv ...

javascriptajaxhttpclient-server

Guide to bringing in a variable from an external module

As a backend developer working on Node.JS code, I am trying to incorporate some constants from the @aws-sdk/signature-v4 module into my project. Specifically, I need to access AMZ_DATE_QUERY_PARAM as mentioned in the documentation. However, I am struggling ...

javascriptnode.jsecmascript-6

Reposition buttons using JavaScript

I attempted to modify the button that appears at the top of an HTML page. <div class='play'> <input id="play" type="button" value="Play" onclick="mode('play');startSlideshow();" /> </div> <div class='pause ...

javascripthtmlcssbutton

NodeJS application experiencing significant delays due to slow response times from MySQL database queries

Currently, I am in the process of learning about Node.js. Through utilizing Express and Node-Mysql, I have been able to effectively query my mysql database and return the outcomes as JSON to the client. However, there seems to be a significant delay. Eve ...

javascriptnode.jsnode-mysql

Retrieve specific JSON elements and showcase on an HTML webpage

I created a simple webpage where users can input the name of an actor and I want to show all the movies that actor has been in. Currently, I have hardcoded the API URL for Bradley Cooper. How can I retrieve all movie titles, release years, overviews, and ...

javascriptjson