playbook_ui 7.7.0.pre.alpha1 → 7.8.3
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/assets/images/{sample_screenshot.svg → full_page_samples.svg} +0 -0
- data/app/pb_kits/playbook/_playbook.scss +4 -1
- data/app/pb_kits/playbook/data/menu.yml +3 -0
- data/app/pb_kits/playbook/index.js +4 -1
- data/app/pb_kits/playbook/pb_avatar/_avatar.jsx +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +27 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +1 -2
- data/app/pb_kits/playbook/pb_filter/Filter/CurrentFilters.jsx +8 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx +9 -2
- data/app/pb_kits/playbook/pb_filter/Filter/FilterDouble.jsx +17 -6
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +15 -5
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +2 -1
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.jsx +4 -1
- data/app/pb_kits/playbook/pb_filter/Filter/SortMenu.jsx +9 -4
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +0 -1
- data/app/pb_kits/playbook/pb_filter/_filter.scss +44 -23
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +3 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +5 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +6 -4
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +73 -28
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +3 -7
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +4 -3
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.html.erb +1 -2
- data/app/pb_kits/playbook/pb_filter/docs/_sort_only.jsx +3 -3
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +4 -5
- data/app/pb_kits/playbook/pb_form_group/_form_group.html.erb +7 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.jsx +41 -0
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +123 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.html.erb +12 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_button.jsx +39 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.html.erb +6 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_date_picker.jsx +21 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.html.erb +7 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_default.jsx +26 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_select.jsx +35 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.html.erb +21 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card.jsx +42 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.html.erb +19 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_selectable_card_icon.jsx +35 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.html.erb +42 -0
- data/app/pb_kits/playbook/pb_form_group/docs/_form_group_typeahead.jsx +31 -0
- data/app/pb_kits/playbook/pb_form_group/docs/example.yml +20 -0
- data/app/pb_kits/playbook/pb_form_group/docs/index.js +7 -0
- data/app/pb_kits/playbook/pb_form_group/form_group.rb +15 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.html.erb +24 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx +105 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +64 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +49 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.jsx +67 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.html.erb +11 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_default.jsx +25 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.html.erb +20 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_sizes.jsx +35 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.html.erb +7 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_vertical.jsx +19 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/index.js +4 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +52 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +123 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +215 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +10 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.html.erb +3 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_focus.jsx +11 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_simple.jsx +10 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.html.erb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_sticky.jsx +14 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.html.erb +115 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_templates.jsx +39 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +15 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +5 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js +75 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb +55 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/useFocus.js +20 -0
- data/app/pb_kits/playbook/pb_table/_table.scss +45 -13
- data/app/pb_kits/playbook/pb_table/docs/_description.md +1 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.jsx +43 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_column.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.html.erb +34 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.jsx +43 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_row.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.html.erb +63 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.jsx +70 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_data.md +2 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.html.erb +52 -0
- data/app/pb_kits/playbook/pb_table/docs/_table_alignment_shift_row.jsx +61 -0
- data/app/pb_kits/playbook/pb_table/docs/example.yml +9 -1
- data/app/pb_kits/playbook/pb_table/docs/index.js +4 -1
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.html.erb +3 -6
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.jsx +15 -21
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss +0 -17
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.html.erb +4 -1
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_default.jsx +12 -1
- data/app/pb_kits/playbook/pb_time_stacked/docs/example.yml +1 -4
- data/app/pb_kits/playbook/pb_time_stacked/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_time_stacked/time_stacked.rb +7 -11
- data/app/pb_kits/playbook/react_rails_kits.js +1 -0
- data/app/pb_kits/playbook/utilities/globalProps.js +9 -0
- data/app/pb_kits/playbook/utilities/test-utils.js +24 -0
- data/app/pb_kits/playbook/vendor.js +2 -0
- data/lib/playbook/version.rb +1 -1
- metadata +73 -10
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.html.erb +0 -2
- data/app/pb_kits/playbook/pb_time_stacked/docs/_time_stacked_caption.jsx +0 -15
@@ -0,0 +1,39 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
import { RichTextEditor, Select } from '../../'
|
3
|
+
import { changelog, release } from './templates.js'
|
4
|
+
|
5
|
+
const RichTextEditorTemplates = () => {
|
6
|
+
const [editorContent, setEditorContent] = useState('')
|
7
|
+
|
8
|
+
const handleChange = (event) => {
|
9
|
+
setEditorContent(event.target.value)
|
10
|
+
}
|
11
|
+
|
12
|
+
const options = [
|
13
|
+
{
|
14
|
+
value: release,
|
15
|
+
text: 'Playbook Release',
|
16
|
+
},
|
17
|
+
{
|
18
|
+
value: changelog,
|
19
|
+
text: 'Changelog',
|
20
|
+
},
|
21
|
+
]
|
22
|
+
|
23
|
+
return (
|
24
|
+
<div>
|
25
|
+
<Select
|
26
|
+
blankSelection="Select a template..."
|
27
|
+
label="Template"
|
28
|
+
onChange={handleChange}
|
29
|
+
options={options}
|
30
|
+
/>
|
31
|
+
<RichTextEditor
|
32
|
+
id="template"
|
33
|
+
template={editorContent}
|
34
|
+
/>
|
35
|
+
</div>
|
36
|
+
)
|
37
|
+
}
|
38
|
+
|
39
|
+
export default RichTextEditorTemplates
|
@@ -0,0 +1,15 @@
|
|
1
|
+
examples:
|
2
|
+
|
3
|
+
rails:
|
4
|
+
- rich_text_editor_default: Default
|
5
|
+
- rich_text_editor_simple: Simple
|
6
|
+
- rich_text_editor_focus: Focus
|
7
|
+
- rich_text_editor_sticky: Sticky
|
8
|
+
- rich_text_editor_templates: Templates
|
9
|
+
|
10
|
+
react:
|
11
|
+
- rich_text_editor_default: Default
|
12
|
+
- rich_text_editor_simple: Simple
|
13
|
+
- rich_text_editor_focus: Focus
|
14
|
+
- rich_text_editor_sticky: Sticky
|
15
|
+
- rich_text_editor_templates: Templates
|
@@ -0,0 +1,5 @@
|
|
1
|
+
export { default as RichTextEditorDefault } from './_rich_text_editor_default.jsx'
|
2
|
+
export { default as RichTextEditorSimple } from './_rich_text_editor_simple.jsx'
|
3
|
+
export { default as RichTextEditorFocus } from './_rich_text_editor_focus.jsx'
|
4
|
+
export { default as RichTextEditorSticky } from './_rich_text_editor_sticky.jsx'
|
5
|
+
export { default as RichTextEditorTemplates } from './_rich_text_editor_templates.jsx'
|
@@ -0,0 +1,75 @@
|
|
1
|
+
export const release = `
|
2
|
+
<div>
|
3
|
+
<div>
|
4
|
+
<strong>Story Background</strong>
|
5
|
+
</div>
|
6
|
+
<div>
|
7
|
+
Follow the{" "}
|
8
|
+
<a href='https://github.com/powerhome/playbook/wiki/Release-Team-Guide'>
|
9
|
+
release process
|
10
|
+
</a>{" "}
|
11
|
+
to create a new version, create a gem, and package. Create a Ninja testing
|
12
|
+
plan, then update Nitro with the new version.
|
13
|
+
</div>
|
14
|
+
<div>
|
15
|
+
<br />
|
16
|
+
</div>
|
17
|
+
<div>
|
18
|
+
<strong>Timeline / Due Date</strong>
|
19
|
+
</div>
|
20
|
+
<div>
|
21
|
+
<em>Release End of business Thursday</em>
|
22
|
+
</div>
|
23
|
+
<div>
|
24
|
+
<em>Testing on Nitro End of business Friday</em>
|
25
|
+
</div>
|
26
|
+
<div>
|
27
|
+
<br />
|
28
|
+
</div>
|
29
|
+
<div>
|
30
|
+
<strong>Definition of done</strong>
|
31
|
+
</div>
|
32
|
+
<ol>
|
33
|
+
<li>Merge all PR’s</li>
|
34
|
+
<li>Update the final CHANGELOG</li>
|
35
|
+
<li>Version up and generate NPM, and RubyGem</li>
|
36
|
+
<li>Create next version branch and milestone</li>
|
37
|
+
<li>Update default branch and branch protection rules </li>
|
38
|
+
<li>Notify Everyone of new version</li>
|
39
|
+
<li>
|
40
|
+
Generate testing plan and pages to test for Ninjas (update runway
|
41
|
+
ticket)
|
42
|
+
</li>
|
43
|
+
<li>Update version on Nitro and get on Demo</li>
|
44
|
+
<li>Send Ninjas demo and runway ticket for testing</li>
|
45
|
+
<li>Ninja Approved + PR Approved</li>
|
46
|
+
</ol>
|
47
|
+
<div>
|
48
|
+
<br />
|
49
|
+
</div>
|
50
|
+
<div>
|
51
|
+
<strong>Stakeholders / Sign-off</strong>
|
52
|
+
</div>
|
53
|
+
<ul>
|
54
|
+
<li>Code Owners</li>
|
55
|
+
</ul>
|
56
|
+
<div>
|
57
|
+
<br />
|
58
|
+
<strong>Cadence</strong>
|
59
|
+
<br />
|
60
|
+
Jason, Jon, Stephen, Jasper, Brendan, Cole
|
61
|
+
</div>
|
62
|
+
</div>
|
63
|
+
`
|
64
|
+
|
65
|
+
export const changelog = `
|
66
|
+
<div>
|
67
|
+
<strong>Changelog:<br></strong>
|
68
|
+
[INSERT LINK]<br><br>
|
69
|
+
You can test the normal spots of Playbook rails and react on
|
70
|
+
dev docs plus the following:
|
71
|
+
</div>
|
72
|
+
<div>
|
73
|
+
<br>
|
74
|
+
</div>
|
75
|
+
`
|
@@ -0,0 +1,55 @@
|
|
1
|
+
# frozen_string_literal: true
|
2
|
+
|
3
|
+
module Playbook
|
4
|
+
module PbRichTextEditor
|
5
|
+
class RichTextEditor
|
6
|
+
include Playbook::Props
|
7
|
+
partial "pb_rich_text_editor/rich_text_editor"
|
8
|
+
|
9
|
+
|
10
|
+
prop :focus, type: Playbook::Props::Boolean,
|
11
|
+
default: false
|
12
|
+
|
13
|
+
prop :simple, type: Playbook::Props::Boolean,
|
14
|
+
default: false
|
15
|
+
|
16
|
+
prop :sticky, type: Playbook::Props::Boolean,
|
17
|
+
default: false
|
18
|
+
|
19
|
+
prop :value
|
20
|
+
prop :template
|
21
|
+
prop :placeholder
|
22
|
+
|
23
|
+
def classname
|
24
|
+
generate_classname("pb_rich_text_editor_kit", simple_class, focus_class, sticky_class, separator: " ")
|
25
|
+
end
|
26
|
+
|
27
|
+
def focus_class
|
28
|
+
focus ? "focus-editor-targets" : nil
|
29
|
+
end
|
30
|
+
|
31
|
+
def simple_class
|
32
|
+
simple ? "simple" : nil
|
33
|
+
end
|
34
|
+
|
35
|
+
def sticky_class
|
36
|
+
sticky ? "sticky" : nil
|
37
|
+
end
|
38
|
+
|
39
|
+
def rich_text_options
|
40
|
+
{
|
41
|
+
id: id,
|
42
|
+
className: classname,
|
43
|
+
focus: focus,
|
44
|
+
simple: simple,
|
45
|
+
sticky: sticky,
|
46
|
+
value: value,
|
47
|
+
template: template,
|
48
|
+
placeholder: placeholder
|
49
|
+
}
|
50
|
+
end
|
51
|
+
|
52
|
+
end
|
53
|
+
end
|
54
|
+
end
|
55
|
+
|
@@ -0,0 +1,20 @@
|
|
1
|
+
const useFocus = () => {
|
2
|
+
const allTrixEditors = document.querySelectorAll(
|
3
|
+
'.focus-editor-targets trix-editor'
|
4
|
+
)
|
5
|
+
allTrixEditors.forEach((editorElement) => {
|
6
|
+
const toolbarElement = editorElement.toolbarElement
|
7
|
+
if (editorElement == document.activeElement) {
|
8
|
+
editorElement.classList.add('focused-editor')
|
9
|
+
toolbarElement.style.display = 'block'
|
10
|
+
} else {
|
11
|
+
// don't hide the toolbar if we've unfocused to focus on the link dialog.
|
12
|
+
if (!toolbarElement.contains(document.activeElement)) {
|
13
|
+
editorElement.classList.remove('focused-editor')
|
14
|
+
toolbarElement.style.display = 'none'
|
15
|
+
}
|
16
|
+
}
|
17
|
+
})
|
18
|
+
}
|
19
|
+
|
20
|
+
export default useFocus
|
@@ -4,22 +4,54 @@
|
|
4
4
|
$pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $product_colors), $category_colors);
|
5
5
|
|
6
6
|
@mixin pb_table_row_kit_side_highlight($background) {
|
7
|
-
|
8
|
-
|
7
|
+
box-shadow: inset 4px 0 0 0 $background;
|
8
|
+
border-top: 0px;
|
9
9
|
}
|
10
10
|
|
11
11
|
[class^=pb_table] {
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
}
|
20
|
-
}
|
21
|
-
}
|
12
|
+
tbody {
|
13
|
+
[class^=pb_table_row_kit] {
|
14
|
+
@each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
|
15
|
+
&[class*=_side_highlight_#{$color_name}] {
|
16
|
+
td {
|
17
|
+
&:first-child {
|
18
|
+
@include pb_table_row_kit_side_highlight($color_value);
|
22
19
|
}
|
20
|
+
}
|
23
21
|
}
|
22
|
+
}
|
24
23
|
}
|
25
|
-
}
|
24
|
+
}
|
25
|
+
tr[align=center] th,
|
26
|
+
tr th[align=center] {
|
27
|
+
text-align: center !important;
|
28
|
+
}
|
29
|
+
|
30
|
+
tr[align=right] th,
|
31
|
+
tr th[align=right] {
|
32
|
+
text-align: right !important;
|
33
|
+
}
|
34
|
+
|
35
|
+
tr[shift=up] {
|
36
|
+
vertical-align: top;
|
37
|
+
}
|
38
|
+
tr[shift=down] {
|
39
|
+
vertical-align: bottom;
|
40
|
+
}
|
41
|
+
|
42
|
+
td[shift=up] {
|
43
|
+
vertical-align: top;
|
44
|
+
}
|
45
|
+
td[shift=down] {
|
46
|
+
vertical-align: bottom;
|
47
|
+
}
|
48
|
+
|
49
|
+
th[shift=up] {
|
50
|
+
vertical-align: top;
|
51
|
+
}
|
52
|
+
|
53
|
+
th[shift=down] {
|
54
|
+
vertical-align: bottom;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
@@ -1 +1,2 @@
|
|
1
1
|
Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data. Good data tables allows the user to scan, analyze, compare, filter, and sort information to derive insights and commit actions.
|
2
|
+
Table shift and alignment attributes can work in conjunction with each other, as well as be applied to the table header (not just the table body).
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<%= pb_rails("table") do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th>Column 1</th>
|
5
|
+
<th>Column 2</th>
|
6
|
+
<th>Column 3</th>
|
7
|
+
<th align="center">Rating</th>
|
8
|
+
<th align="right">Money</th>
|
9
|
+
</tr>
|
10
|
+
</thead>
|
11
|
+
<tbody>
|
12
|
+
<tr>
|
13
|
+
<td>Value 1</td>
|
14
|
+
<td>Value 2</td>
|
15
|
+
<td>Value 3</td>
|
16
|
+
<td align="center">3</td>
|
17
|
+
<td align="right">$57.32</td>
|
18
|
+
</tr>
|
19
|
+
<tr>
|
20
|
+
<td>Value 1</td>
|
21
|
+
<td>Value 2</td>
|
22
|
+
<td>Value 3</td>
|
23
|
+
<td align="center">2</td>
|
24
|
+
<td align="right">$5,657.08</td>
|
25
|
+
</tr>
|
26
|
+
<tr>
|
27
|
+
<td>Value 1</td>
|
28
|
+
<td>Value 2</td>
|
29
|
+
<td>Value 3</td>
|
30
|
+
<td align="center">4</td>
|
31
|
+
<td align="right">$358.77</td>
|
32
|
+
</tr>
|
33
|
+
</tbody>
|
34
|
+
<% end %>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Table } from '../../'
|
3
|
+
|
4
|
+
const TableAlignmentColumn = () => {
|
5
|
+
return (
|
6
|
+
<Table>
|
7
|
+
<thead>
|
8
|
+
<tr>
|
9
|
+
<th>{'Column 1'}</th>
|
10
|
+
<th>{'Column 2'}</th>
|
11
|
+
<th>{'Column 3'}</th>
|
12
|
+
<th align="center">{'Rating'}</th>
|
13
|
+
<th align="right">{'Money'}</th>
|
14
|
+
</tr>
|
15
|
+
</thead>
|
16
|
+
<tbody>
|
17
|
+
<tr>
|
18
|
+
<td>{'Value 1'}</td>
|
19
|
+
<td>{'Value 2'}</td>
|
20
|
+
<td>{'Value 3'}</td>
|
21
|
+
<td align="center">{'3'}</td>
|
22
|
+
<td align="right">{'$57.32'}</td>
|
23
|
+
</tr>
|
24
|
+
<tr>
|
25
|
+
<td>{'Value 1'}</td>
|
26
|
+
<td>{'Value 2'}</td>
|
27
|
+
<td>{'Value 3'}</td>
|
28
|
+
<td align="center">{'2'}</td>
|
29
|
+
<td align="right">{'$5,657.08'}</td>
|
30
|
+
</tr>
|
31
|
+
<tr>
|
32
|
+
<td>{'Value 1'}</td>
|
33
|
+
<td>{'Value 2'}</td>
|
34
|
+
<td>{'Value 3'}</td>
|
35
|
+
<td align="center">{'4'}</td>
|
36
|
+
<td align="right">{'$358.77'}</td>
|
37
|
+
</tr>
|
38
|
+
</tbody>
|
39
|
+
</Table>
|
40
|
+
)
|
41
|
+
}
|
42
|
+
|
43
|
+
export default TableAlignmentColumn
|
@@ -0,0 +1,34 @@
|
|
1
|
+
<%= pb_rails("table") do %>
|
2
|
+
<thead>
|
3
|
+
<tr>
|
4
|
+
<th>Column 1</th>
|
5
|
+
<th>Column 2</th>
|
6
|
+
<th>Column 3</th>
|
7
|
+
<th>Column 4</th>
|
8
|
+
<th>Column 5</th>
|
9
|
+
</tr>
|
10
|
+
</thead>
|
11
|
+
<tbody>
|
12
|
+
<tr>
|
13
|
+
<td>Value 1</td>
|
14
|
+
<td>Value 2</td>
|
15
|
+
<td>Value 3</td>
|
16
|
+
<td>Value 4</td>
|
17
|
+
<td>Value 5</td>
|
18
|
+
</tr>
|
19
|
+
<tr align="center">
|
20
|
+
<td>Value 1</td>
|
21
|
+
<td>Value 2</td>
|
22
|
+
<td>Value 3</td>
|
23
|
+
<td>Value 4</td>
|
24
|
+
<td>Value 5</td>
|
25
|
+
</tr>
|
26
|
+
<tr align="right">
|
27
|
+
<td>Value 1</td>
|
28
|
+
<td>Value 2</td>
|
29
|
+
<td>Value 3</td>
|
30
|
+
<td>Value 4</td>
|
31
|
+
<td>Value 5</td>
|
32
|
+
</tr>
|
33
|
+
</tbody>
|
34
|
+
<% end %>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Table } from '../../'
|
3
|
+
|
4
|
+
const TableAlignmentRow = () => {
|
5
|
+
return (
|
6
|
+
<Table>
|
7
|
+
<thead>
|
8
|
+
<tr>
|
9
|
+
<th>{'Column 1'}</th>
|
10
|
+
<th>{'Column 2'}</th>
|
11
|
+
<th>{'Column 3'}</th>
|
12
|
+
<th>{'Column 4'}</th>
|
13
|
+
<th>{'Column 5'}</th>
|
14
|
+
</tr>
|
15
|
+
</thead>
|
16
|
+
<tbody>
|
17
|
+
<tr>
|
18
|
+
<td>{'Value 1'}</td>
|
19
|
+
<td>{'Value 2'}</td>
|
20
|
+
<td>{'Value 3'}</td>
|
21
|
+
<td>{'Value 4'}</td>
|
22
|
+
<td>{'Value 5'}</td>
|
23
|
+
</tr>
|
24
|
+
<tr align="center">
|
25
|
+
<td>{'Value 1'}</td>
|
26
|
+
<td>{'Value 2'}</td>
|
27
|
+
<td>{'Value 3'}</td>
|
28
|
+
<td>{'Value 4'}</td>
|
29
|
+
<td>{'Value 5'}</td>
|
30
|
+
</tr>
|
31
|
+
<tr align="right">
|
32
|
+
<td>{'Value 1'}</td>
|
33
|
+
<td>{'Value 2'}</td>
|
34
|
+
<td>{'Value 3'}</td>
|
35
|
+
<td>{'Value 4'}</td>
|
36
|
+
<td>{'Value 5'}</td>
|
37
|
+
</tr>
|
38
|
+
</tbody>
|
39
|
+
</Table>
|
40
|
+
)
|
41
|
+
}
|
42
|
+
|
43
|
+
export default TableAlignmentRow
|