Kevin Powell - Community•2y ago

Making a nice table list

I am making a list of logs and i want that all the colums align nicely. Using a table does not work cause i can not customise it well and make it apear as a list This is my code:

  <div class="table">
      {
          session.events.map(e => (
                          <div class="row">
                              {
                                  e.isMistake ?
                                          <span class="cell material-symbols-outlined error">
                                              report
                                          </span> :
                                          <span class="cell material-symbols-outlined">
                                              info
                                          </span>
                              }
                              <div class="cell">{e.timestamp.toLocaleTimeString()}</div>
                              <div class="cell">{e.traineeId}</div>
                              <div class="tag">{e.type}</div>
                              <div class="cell">{e.description}</div>
                          </div>
              )
          )
      }
  </div>

  <div class="table">
      {
          session.events.map(e => (
                          <div class="row">
                              {
                                  e.isMistake ?
                                          <span class="cell material-symbols-outlined error">
                                              report
                                          </span> :
                                          <span class="cell material-symbols-outlined">
                                              info
                                          </span>
                              }
                              <div class="cell">{e.timestamp.toLocaleTimeString()}</div>
                              <div class="cell">{e.traineeId}</div>
                              <div class="tag">{e.type}</div>
                              <div class="cell">{e.description}</div>
                          </div>
              )
          )
      }
  </div>

.table {
    display: flex;
    flex-direction: column;

}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    padding: .5rem 1rem;
    background-color: //some color;
    border-radius: .5rem;

}

.cell {
    margin: 0 1rem;
}

.table {
    display: flex;
    flex-direction: column;

}

.row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1rem 0;
    padding: .5rem 1rem;
    background-color: //some color;
    border-radius: .5rem;

}

.cell {
    margin: 0 1rem;
}

I also want titles added so (header row) wich should align whit the correct colum. Any idea on how to do this. Or any suggestion. as you can see below: The items do not align on eachother. Names do not aligh type aswell This is the result of my code:

1 Reply

Mannix•2y ago

if you want to create a table without using table element use grid not flexbox 😄

Gaming

Programming

Making a nice table list