how to display a csv string in UI like a table?

Question

Problem:

I am new in dealing with this, so probably this is trival task, but let me know if this question isnt necessary, I will cancel it.

In my front end, I have a api that will return my a string which is supposed to be a csv xlsc, after I call a api.

After that, I would like to show it on UI.

Problem in it

This is the example string I get from the response

'key,Asset Class,Benchmark Name,Benchmark Source
\r\n1001,Macro,US CSA,BLOOMBERG
\r\n1026,Equity,MSCI x USD,BLOOMBERG
\r\n1002,Equity,MSCI  USD,BLOOMBERG\r\n'

There are 4 header, and there are 4 row of data As you can see, this is not something I could display it in table. I would like to ask how could I frame this data structure, so that it could be listed out. or at least like a table format

RubenSmn · Accepted Answer · 2022-10-18 17:37:31Z

1

Like mentioned in the other answer, the most intuitive way is by splitting the string. I made an react approach to this.

let data =
  "key,Asset Class,Benchmark Name,Benchmark Source \r\n1001,Macro,US CSA,BLOOMBERG \r\n1026,Equity,MSCI x USD,BLOOMBERG \r\n1002,Equity,MSCI  USD,BLOOMBERG\r\n";

data = data.slice(0, -2); // gets rid of the last "\r\n"
const rows = data.split(" \r\n").map((cols) => cols.split(","));

const Table = () => {
  return (
    <table>
      <tbody>
        {rows.map((cols, index) => (
          <tr key={`row-${index}`}>
            {cols.map((value) => (
              <td key={value}>{value}</td>
            ))}
          </tr>
        ))}
      </tbody>
    </table>
  );
};

function App() {
  return <Table />;
}

export default App;

edited Oct 18, 2022 at 17:37

answered Oct 18, 2022 at 16:26

RubenSmn

4,7422 gold badges12 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Ae Leung Over a year ago

Thanks ! could you also vote up this topic, so this could also be seen by others?

Ae Leung Over a year ago

I see below error when I paste it on react ide, May i see your code in running ? Warning: validateDOMNesting(...): %s cannot appear as a child of <%s>.%s%s%s <tr> table Add a <tbody>, <thead> or <tfoot> to your code to match the DOM tree generated by the browser.

RubenSmn Over a year ago

That is my mistake, you should surround the {rows.map(.... with a <tbody> tag

R Rungsikavanich · Accepted Answer · 2022-10-18 16:13:00Z

The most intuitive way is split string by line break for each row and by delimiter for each column then loop over it to create a table

here is a rendering in vanilla but it should also share the same idea with react

see a sample fiddler here

<div id="root">
  <table>
    <tbody id="tt"></tbody>
  </table>
</div>

var f = `key,Asset Class,Benchmark Name,Benchmark Source
\r\n1001,Macro,US CSA,BLOOMBERG
\r\n1026,Equity,MSCI x USD,BLOOMBERG
\r\n1002,Equity,MSCI  USD,BLOOMBERG\r\n`.split('\n\r')

const tt = document.getElementById('tt')

for (let line of f) {
    const tr = document.createElement('tr')
    tt.appendChild(tr)
    for (let col of line.split(',')) {
      const td = document.createElement('td')
      td.innerText = col;
      tr.appendChild(td)
  }
}

Collectives™ on Stack Overflow

how to display a csv string in UI like a table?

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related