Midwest Component Library v0.28.2

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
<div class="p-8">
  <div data-controller="midwest-table" data-midwest-table-resizable-value="true" data-midwest-table-resize-storage-key-value="team-members" class="midwest-table-wrapper resizable">
    <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" data-col-index="0">
              Name
              <span class="midwest-table-resize-handle"
                      aria-hidden="true"
                      data-action="pointerdown->midwest-table#startResize dblclick->midwest-table#autoSizeColumn"></span>
            </th>
            
            <th scope="col" class="midwest-table-th align-start" data-col-index="1">
              Role
              <span class="midwest-table-resize-handle"
                      aria-hidden="true"
                      data-action="pointerdown->midwest-table#startResize dblclick->midwest-table#autoSizeColumn"></span>
            </th>
            
            <th scope="col" class="midwest-table-th align-start" data-col-index="2">
              Status
              <span class="midwest-table-resize-handle"
                      aria-hidden="true"
                      data-action="pointerdown->midwest-table#startResize dblclick->midwest-table#autoSizeColumn"></span>
            </th>
            
            <th scope="col" class="midwest-table-th align-start" data-col-index="3">
              Joined
              <span class="midwest-table-resize-handle"
                      aria-hidden="true"
                      data-action="pointerdown->midwest-table#startResize dblclick->midwest-table#autoSizeColumn"></span>
            </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>
        </tbody>
      </table>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%
  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'),
  ]
%>
<div class="p-8">
  <%= midwest_table(collection: rows, caption: 'Team members', resizable: true, resize_storage_key: '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>

Resizable

Set resizable: true to drag column borders (hover a header's right edge). Double-click a border to auto-size. Pass resize_storage_key: to persist widths to localStorage across reloads.

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/resizable

Annotate a preview to embed its Figma design here:

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