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
132
133
134
135
136
137
138
139
<div class="p-8">
  <div data-controller="midwest-table" data-midwest-table-resizable-value="false" class="midwest-table-wrapper">
    <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 (page 2 of 10)</caption>
        <thead class="midwest-table-head">
          <tr>
            <th scope="col" class="midwest-table-th align-start" data-col-index="0">
              Name
            </th>
            
            <th scope="col" class="midwest-table-th align-start" data-col-index="1">
              Role
            </th>
            
            <th scope="col" class="midwest-table-th align-start" data-col-index="2">
              Status
            </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>
          </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>
          </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>
          </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>
          </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>
          </tr>
        </tbody>
      </table>
    </div>
    <div class="midwest-table-pagination">
      <nav class="midwest-pagination variant-default" aria-label="Pagination">
        <div class="midwest-pagination-controls">
          <a class="midwest-pagination-btn is-prev" aria-label="Go to previous page" href="?page=1">
            <div class="midwest-icon " aria-hidden="true">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow back"><title>Arrow back</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M244 400L100 256l144-144M120 256h292"></path></svg>
              </div>
            </div>
          </a>
          <a class="midwest-pagination-btn" aria-label="Go to page 1" href="?page=1">1</a>
          <span class="midwest-pagination-btn is-current" aria-current="page">2</span>
          <a class="midwest-pagination-btn" aria-label="Go to page 3" href="?page=3">3</a>
          <a class="midwest-pagination-btn" aria-label="Go to page 4" href="?page=4">4</a>
          <span class="midwest-pagination-ellipsis" aria-hidden="true">…</span>
          <a class="midwest-pagination-btn" aria-label="Go to page 10" href="?page=10">10</a>
          <a class="midwest-pagination-btn is-next" aria-label="Go to next page" href="?page=3">
            <div class="midwest-icon " aria-hidden="true">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Arrow forward"><title>Arrow forward</title>
                  <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="48" d="M268 112l144 144-144 144M392 256H100"></path></svg>
              </div>
            </div>
          </a>      </div>
      </nav>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<%
  row_class = Struct.new(:name, :role, :status, keyword_init: true)
  rows = [
    row_class.new(name: 'Alice Johnson', role: 'Engineer', status: 'Active'),
    row_class.new(name: 'Bob Smith',     role: 'Designer', status: 'Active'),
    row_class.new(name: 'Carol White',   role: 'Manager',  status: 'Away'),
    row_class.new(name: 'David Lee',     role: 'Engineer', status: 'Inactive'),
    row_class.new(name: 'Eve Martinez',  role: 'Designer', status: 'Active'),
  ]
%>
<div class="p-8">
  <%= midwest_table(collection: rows, caption: 'Team members (page 2 of 10)') do |t| %>
    <% t.with_column('Name',   key: :name) %>
    <% t.with_column('Role',   key: :role) %>
    <% t.with_column('Status', key: :status) %>
    <% t.with_pagination do %>
      <%= midwest_pagination(current_page: 2, total_pages: 10, page_url: ->(p) { "?page=#{p}" }) %>
    <% end %>
  <% end %>
</div>

With Pagination

Use the pagination slot to attach a pagination component below the table.

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

Annotate a preview to embed its Figma design here:

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