Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<div class="p-8">
  <div data-controller="midwest-table" class="midwest-table-wrapper striped">
    <div class="midwest-table-loading-overlay" aria-hidden="true">
      <div class="midwest-loading-icon" role="img" aria-label="Loading" decorative="true">
        <div class="midwest-loading-icon-inner">
          <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
          <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
            <circle cx="15" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="60" cy="15" r="9" fill-opacity="0.3">
              <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
            <circle cx="105" cy="15" r="15">
              <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
              <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
            </circle>
          </svg>
        </div>
      </div>
    </div>
    <div class="midwest-table-scroll">
      <table class="midwest-table">
        <caption class="sr-only">Team members</caption>
        <thead class="midwest-table-head">
          <tr>
            <th scope="col" class="midwest-table-th align-start">
              Name
            </th>
            
            <th scope="col" class="midwest-table-th align-start">
              Role
            </th>
            
            <th scope="col" class="midwest-table-th align-start">
              Status
            </th>
            
            <th scope="col" class="midwest-table-th align-start">
              Joined
            </th>
        </tr>
        </thead>
        <tbody class="midwest-table-body">
          <tr class="midwest-table-row">
            <td class="midwest-table-td align-start">
              Alice Johnson
            </td>
            <td class="midwest-table-td align-start">
              Engineer
            </td>
            <td class="midwest-table-td align-start">
              Active
            </td>
            <td class="midwest-table-td align-start">
              Jan 2022
            </td>
          </tr>
          <tr class="midwest-table-row">
            <td class="midwest-table-td align-start">
              Bob Smith
            </td>
            <td class="midwest-table-td align-start">
              Designer
            </td>
            <td class="midwest-table-td align-start">
              Active
            </td>
            <td class="midwest-table-td align-start">
              Mar 2021
            </td>
          </tr>
          <tr class="midwest-table-row">
            <td class="midwest-table-td align-start">
              Carol White
            </td>
            <td class="midwest-table-td align-start">
              Manager
            </td>
            <td class="midwest-table-td align-start">
              Away
            </td>
            <td class="midwest-table-td align-start">
              Nov 2020
            </td>
          </tr>
          <tr class="midwest-table-row">
            <td class="midwest-table-td align-start">
              David Lee
            </td>
            <td class="midwest-table-td align-start">
              Engineer
            </td>
            <td class="midwest-table-td align-start">
              Inactive
            </td>
            <td class="midwest-table-td align-start">
              Jul 2023
            </td>
          </tr>
          <tr class="midwest-table-row">
            <td class="midwest-table-td align-start">
              Eve Martinez
            </td>
            <td class="midwest-table-td align-start">
              Designer
            </td>
            <td class="midwest-table-td align-start">
              Active
            </td>
            <td class="midwest-table-td align-start">
              Feb 2024
            </td>
          </tr>
          <tr class="midwest-table-row">
            <td class="midwest-table-td align-start">
              Frank Chen
            </td>
            <td class="midwest-table-td align-start">
              Engineer
            </td>
            <td class="midwest-table-td align-start">
              Active
            </td>
            <td class="midwest-table-td align-start">
              Sep 2022
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%
  row_class = Struct.new(:name, :role, :status, :joined, keyword_init: true)
  rows = [
    row_class.new(name: 'Alice Johnson', role: 'Engineer', status: 'Active',   joined: 'Jan 2022'),
    row_class.new(name: 'Bob Smith',     role: 'Designer', status: 'Active',   joined: 'Mar 2021'),
    row_class.new(name: 'Carol White',   role: 'Manager',  status: 'Away',     joined: 'Nov 2020'),
    row_class.new(name: 'David Lee',     role: 'Engineer', status: 'Inactive', joined: 'Jul 2023'),
    row_class.new(name: 'Eve Martinez',  role: 'Designer', status: 'Active',   joined: 'Feb 2024'),
    row_class.new(name: 'Frank Chen',    role: 'Engineer', status: 'Active',   joined: 'Sep 2022'),
  ]
%>
<div class="p-8">
  <%= midwest_table(collection: rows, striped: true, caption: 'Team members') do |t| %>
    <% t.with_column('Name',   key: :name) %>
    <% t.with_column('Role',   key: :role) %>
    <% t.with_column('Status', key: :status) %>
    <% t.with_column('Joined', key: :joined) %>
  <% end %>
</div>

Striped

Set striped: true for alternating row backgrounds.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Table/striped

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."