Is there a better way of displaying data in a table in Blazor?

Question

I'm building a Blazor app, which has a table with about 20 columns. Once data is loaded you have to scroll sideways, which is less than optimal.

Is there a better way of displaying the data?

In a UWP app I had the layout like the image below:

Is there a way to display data like this image in a HTML table?

The table layout I have for the Blazor app is:

<table class="table">
    <thead>
        <tr>
            <td><b>Shipment type</b></td>
            <td><b>Carrier</b></td>
            <td><b>Country of departure</b></td>
            <td><b>Shipping Company</b></td>
            <td><b>Goods description</b></td>
            <td><b>Weight or Volume</b></td>
            <td><b>Package status</b></td>
            <td><b>Actions</b></td>
            <td><b>Package file number</b></td>
            <td><b>AWB Number</b></td>
            <td><b>Manifest number</b></td>
            <td><b>Package number</b></td>
            <td><b>Package type</b></td>
            <td><b>Value</b></td>
            <td><b>Date in</b></td>
            <td><b>Date stripped</b></td>
            <td><b>ETS number</b></td>
            <td><b>Shipping method</b></td>
            <td><b>Receiver</b></td>
            <td><b>Quantity</b></td>
            <td><b>Customer</b></td>
            <td><b>Date out</b></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>
                <a href="#">Edit</a> | <a href="#">Delete</a>
            </td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
            <td>xxx</td>
        </tr>
    </tbody>
</table>

Any help is appreciated.

Answer 1

As mentioned in my comment, I'd contemplate ditching the table all together. You should only use the the table tag when you have tabular data, but just because you have tabular data doesn't mean you have to use it. If you want to display as a list of items for layout reasons go for it.

Moving away from a table can give you more flexibility and easier control with media queries than a table.

In the example below, I've use and ordered list of items. Each item then contains a CSS grid to layout the data. The example is a bit rough and ready but should give you something to work with if you want to move away from the rigidity of tables

.shippingItems {
  padding: 0;
  list-style: none;
}

.shippingItem:nth-child(odd) { 
  background-color:#EEE;
}

.shippingItem:nth-child(even) { 
  background-color:#DDD;
}  

.shippingItem {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(3, 1fr);
  grid-column-gap: 1px;
  grid-row-gap: 5px;
}

.shippingItem .double{
  grid-column: span 2;
}

.item__group h2 {
  font-size: 1em;
  margin: 0;
}

<ol class="shippingItems">
  <li class="shippingItem">
    <div class="item__group">
      <h2>Shipment Type</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Carrier</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Country of departure</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Shipping Company</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Goods description</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Weight or Volume</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Package status</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group actions">
      <h2>Actions</h2>
      <div class="item__data"><a href="#">Edit</a> | <a href="#">Delete</a></div>
    </div>
    <div class="item__group">
      <h2>Package file number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>AWB Number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Manifest number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Package number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Package type</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Value</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group double">
      <h2>Date in</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Date stripped</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>ETS number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Shipping method</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Receiver</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Quantity</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Customer</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group double">
      <h2>Date out</h2>
      <div class="item__data">xxxx</div>
    </div>
  </li>
  <li class="shippingItem">
    <div class="item__group">
      <h2>Shipment Type</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Carrier</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Country of departure</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Shipping Company</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Goods description</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Weight or Volume</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Package status</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group actions">
      <h2>Actions</h2>
      <div class="item__data"><a href="#">Edit</a> | <a href="#">Delete</a></div>
    </div>
    <div class="item__group">
      <h2>Package file number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>AWB Number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Manifest number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Package number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Package type</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Value</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group double">
      <h2>Date in</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Date stripped</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>ETS number</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Shipping method</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Receiver</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Quantity</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group">
      <h2>Customer</h2>
      <div class="item__data">xxxx</div>
    </div>
    <div class="item__group double">
      <h2>Date out</h2>
      <div class="item__data">xxxx</div>
    </div>
  </li>
</ol>