[proposal] Update generated index view to use css tables

rubyonrails-core
1

The generated rails index views from a scaffold look pretty bad. I understand it’s so that javascript replacement works but I think we can use divs with css table styling to have a much better default layout:

.css-table {
  display: table;
  width: 100%;
  border-radius: 8px;
  background-color: #343a40;
  overflow: hidden;
  .css-table-row {
    display: table-row;
    &.css-table-header {
      font-weight: bold;
      color: rgb(19, 217, 135);
      background: #40474e;
      border-top-right-radius: 8px;
      border-top-left-radius: 8px;
    }
    &:last-child {
      .css-table-cell {
        border-bottom: none;
      }
    }
    .css-table-cell {
      display: table-cell;
      padding: 0.75rem;
      color: white;
      text-align: center;
      border-bottom: 1px solid #161616;
      &:first-child {
        width: 100%;
        text-align: left;
      }
    }
  }
}

You can then do something like:

<div class="css-table">
      <div class="css-table-row css-table-header">
        <div class="css-table-cell"></div>
        <div class="css-table-cell">Members</div>
        <div class="css-table-cell">Departments</div>
      </div>
      <% @organizations.each do |organization| %>
        <div class="css-table-row organization-row">
          <div class="css-table-cell"><%= link_to organization.name, organization_path(organization) %></div>
          <div class="css-table-cell"><%= organization.members.count %></div>
          <div class="css-table-cell"><%= organization.departments_count %></div>
        </div>
      <% end %>
    </div>

Note that this example code is specific to my layout and is meant as an example of an approach that could be used.

2

The generated views look bad on purpose. It is to force us to change the HTML and CSS. Otherwise, we will have an ocean of lookalike websites just because they were comfortable with the default CSS/HTML.

Even with a well crafted pull request to the Rails repository, it will not happen.

3

Instead of changing Rails, you can extend it:

It explain how to change the generator for the scaffold and use your own.

4

I think “looks bad” was a bad choice of words on my part. I far preferred the way Rails used to generate index views in tables. It was more usable and semantic out of box. The new implementation with P tags is not semantic and not usable out of box. I tend to think the strength of Rails is convention over configuration and requiring automatic reworking seems contrary to that ethos.

I understand that the new format is to help with stimulus view replacement because a parent element is needed for targeting which breaks the table format. A css table format could potentially alleviate that (I think but not 100% sure yet, I will be testing in the next few days.)