Skip to content

Commit a119ad5

Browse files
Michael Besurelevithomason
Michael Besure
authored and
levithomason
committed
feat(Table.Cell) make Table.Cell selectable (#829)
1 parent 9b6e3c2 commit a119ad5

6 files changed

Lines changed: 88 additions & 8 deletions

File tree

‎docs/app/Examples/collections/Table/Variations/TableExampleSelectableCell.js‎

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
import React from 'react'
2+
import { Table } from 'semantic-ui-react'
3+
4+
const TableExampleSelectableCell = () => {
5+
return (
6+
<Table celled>
7+
<Table.Header>
8+
<Table.Row>
9+
<Table.HeaderCell>Name</Table.HeaderCell>
10+
<Table.HeaderCell>Status</Table.HeaderCell>
11+
<Table.HeaderCell>Notes</Table.HeaderCell>
12+
</Table.Row>
13+
</Table.Header>
14+
15+
<Table.Body>
16+
<Table.Row>
17+
<Table.Cell>John</Table.Cell>
18+
<Table.Cell>No Action</Table.Cell>
19+
<Table.Cell selectable>
20+
<a href='#'>Edit</a>
21+
</Table.Cell>
22+
</Table.Row>
23+
<Table.Row>
24+
<Table.Cell>Jamie</Table.Cell>
25+
<Table.Cell>Approved</Table.Cell>
26+
<Table.Cell selectable>
27+
<a href='#'>Edit</a>
28+
</Table.Cell>
29+
</Table.Row>
30+
<Table.Row>
31+
<Table.Cell>Jill</Table.Cell>
32+
<Table.Cell>Denied</Table.Cell>
33+
<Table.Cell selectable>
34+
<a href='#'>Edit</a>
35+
</Table.Cell>
36+
</Table.Row>
37+
<Table.Row warning>
38+
<Table.Cell>John</Table.Cell>
39+
<Table.Cell>No Action</Table.Cell>
40+
<Table.Cell selectable warning>
41+
<a href='#'>Requires change</a>
42+
</Table.Cell>
43+
</Table.Row>
44+
<Table.Row>
45+
<Table.Cell>Jamie</Table.Cell>
46+
<Table.Cell positive>Approved</Table.Cell>
47+
<Table.Cell selectable positive>
48+
<a href='#'>Approve</a>
49+
</Table.Cell>
50+
</Table.Row>
51+
<Table.Row>
52+
<Table.Cell>Jill</Table.Cell>
53+
<Table.Cell negative>Denied</Table.Cell>
54+
<Table.Cell selectable negative>
55+
<a href='#'>Remove</a>
56+
</Table.Cell>
57+
</Table.Row>
58+
</Table.Body>
59+
</Table>
60+
)
61+
}
62+
63+
export default TableExampleSelectableCell

docs/app/Examples/collections/Table/Variations/TableExampleSelectableInverted.js renamed to docs/app/Examples/collections/Table/Variations/TableExampleSelectableInvertedRow.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { Table } from 'semantic-ui-react'
33

4-
const TableExampleSelectableInverted = () => {
4+
const TableExampleSelectableInvertedRow = () => {
55
return (
66
<Table celled inverted selectable>
77
<Table.Header>
@@ -33,4 +33,4 @@ const TableExampleSelectableInverted = () => {
3333
)
3434
}
3535

36-
export default TableExampleSelectableInverted
36+
export default TableExampleSelectableInvertedRow

docs/app/Examples/collections/Table/Variations/TableExampleSelectable.js renamed to docs/app/Examples/collections/Table/Variations/TableExampleSelectableRow.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react'
22
import { Table } from 'semantic-ui-react'
33

4-
const TableExampleSelectable = () => {
4+
const TableExampleSelectableRow = () => {
55
return (
66
<Table celled selectable>
77
<Table.Header>
@@ -48,4 +48,4 @@ const TableExampleSelectable = () => {
4848
)
4949
}
5050

51-
export default TableExampleSelectable
51+
export default TableExampleSelectableRow

‎docs/app/Examples/collections/Table/Variations/index.js‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ const Variations = () => {
3030
/>
3131
<ComponentExample examplePath='collections/Table/Variations/TableExampleFixedLine'>
3232
<Message info>
33-
Fixed "single line" tables will automatically ensure content that does not fit in a single line will receive
34-
"..." ellipsis.
33+
Fixed <code>single line</code> tables will automatically ensure content that does not fit in a single line
34+
will receive "..." ellipsis.
3535
</Message>
3636
</ComponentExample>
3737

@@ -45,9 +45,20 @@ const Variations = () => {
4545
<ComponentExample
4646
title='Selectable Row'
4747
description='A table can have its rows appear selectable.'
48-
examplePath='collections/Table/Variations/TableExampleSelectable'
48+
examplePath='collections/Table/Variations/TableExampleSelectableRow'
4949
/>
50-
<ComponentExample examplePath='collections/Table/Variations/TableExampleSelectableInverted' />
50+
<ComponentExample examplePath='collections/Table/Variations/TableExampleSelectableInvertedRow' />
51+
52+
<ComponentExample
53+
title='Selectable Cell'
54+
description='A table cell can be selectable.'
55+
examplePath='collections/Table/Variations/TableExampleSelectableCell'
56+
>
57+
<Message info>
58+
Using an <code>a</code> link inside a selectable cell will automatically make the hit box the entire
59+
cell area. By default links will inherit their cell color.
60+
</Message>
61+
</ComponentExample>
5162

5263
<ComponentExample
5364
title='Vertical Alignment'

‎src/collections/Table/TableCell.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ function TableCell(props) {
2727
icon,
2828
negative,
2929
positive,
30+
selectable,
3031
singleLine,
3132
textAlign,
3233
verticalAlign,
@@ -41,6 +42,7 @@ function TableCell(props) {
4142
useKeyOnly(error, 'error'),
4243
useKeyOnly(negative, 'negative'),
4344
useKeyOnly(positive, 'positive'),
45+
useKeyOnly(selectable, 'selectable'),
4446
useKeyOnly(singleLine, 'single line'),
4547
useKeyOnly(warning, 'warning'),
4648
useTextAlignProp(textAlign),
@@ -112,6 +114,9 @@ TableCell.propTypes = {
112114
/** A cell may let a user know whether a value is good. */
113115
positive: PropTypes.bool,
114116

117+
/** A cell can be selectable. */
118+
selectable: PropTypes.bool,
119+
115120
/** A cell can specify that its contents should remain on a single line and not wrap. */
116121
singleLine: PropTypes.bool,
117122

‎test/specs/collections/Table/TableCell-test.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ describe('TableCell', () => {
1818
common.propKeyOnlyToClassName(TableCell, 'error')
1919
common.propKeyOnlyToClassName(TableCell, 'negative')
2020
common.propKeyOnlyToClassName(TableCell, 'positive')
21+
common.propKeyOnlyToClassName(TableCell, 'selectable')
2122
common.propKeyOnlyToClassName(TableCell, 'singleLine', {
2223
className: 'single line',
2324
})

0 commit comments

Comments
 (0)