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
<div class="p-8"> <div data-controller="midwest-table" 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</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" data-href="#user-1" data-action="click->midwest-table#navigateRow"> <td class="midwest-table-td align-start"> <span class="font-medium">Alice Johnson</span> </td> <td class="midwest-table-td align-start"> Engineer </td> <td class="midwest-table-td align-start"> <span color="green" class="midwest-badge size-default theme-primary"> <span class="value">Active</span> </span> </td> <td class="midwest-table-td align-start"> Jan 2022 </td> </tr> <tr class="midwest-table-row" data-href="#user-2" data-action="click->midwest-table#navigateRow"> <td class="midwest-table-td align-start"> <span class="font-medium">Bob Smith</span> </td> <td class="midwest-table-td align-start"> Designer </td> <td class="midwest-table-td align-start"> <span color="green" class="midwest-badge size-default theme-primary"> <span class="value">Active</span> </span> </td> <td class="midwest-table-td align-start"> Mar 2021 </td> </tr> <tr class="midwest-table-row" data-href="#user-3" data-action="click->midwest-table#navigateRow"> <td class="midwest-table-td align-start"> <span class="font-medium">Carol White</span> </td> <td class="midwest-table-td align-start"> Manager </td> <td class="midwest-table-td align-start"> <span color="yellow" class="midwest-badge size-default theme-primary"> <span class="value">Away</span> </span> </td> <td class="midwest-table-td align-start"> Nov 2020 </td> </tr> <tr class="midwest-table-row" data-href="#user-4" data-action="click->midwest-table#navigateRow"> <td class="midwest-table-td align-start"> <span class="font-medium">David Lee</span> </td> <td class="midwest-table-td align-start"> Engineer </td> <td class="midwest-table-td align-start"> <span color="gray" class="midwest-badge size-default theme-primary"> <span class="value">Inactive</span> </span> </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
18
19
20
21
22
23
<% row_class = Struct.new(:id, :name, :role, :status, :joined, keyword_init: true) rows = [ row_class.new(id: 1, name: 'Alice Johnson', role: 'Engineer', status: 'Active', joined: 'Jan 2022'), row_class.new(id: 2, name: 'Bob Smith', role: 'Designer', status: 'Active', joined: 'Mar 2021'), row_class.new(id: 3, name: 'Carol White', role: 'Manager', status: 'Away', joined: 'Nov 2020'), row_class.new(id: 4, name: 'David Lee', role: 'Engineer', status: 'Inactive', joined: 'Jul 2023'), ] status_colors = { 'Active' => 'green', 'Away' => 'yellow', 'Inactive' => 'gray' }%><div class="p-8"> <%= midwest_table(collection: rows, caption: 'Team members', row_href: ->(row) { "#user-#{row.id}" }) do |t| %> <% t.with_column('Name') do |row| %> <span class="font-medium"><%= row.name %></span> <% end %> <% t.with_column('Role', key: :role) %> <% t.with_column('Status') do |row| %> <%= midwest_badge(row.status, color: status_colors[row.status]) %> <% end %> <% t.with_column('Joined', key: :joined) %> <% end %></div>Clickable Rows
Pass row_href: with a callable that returns a URL for each row to make
entire rows clickable. Clicks on interactive elements (links, buttons,
inputs) within a row are not intercepted. Cmd/Ctrl+click opens in a new
tab. Uses Turbo.visit when available, falling back to window.location.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Table/clickable_rows
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."