Skip to content

Commit 4992057

Browse files
jbetancurjbetancur
authored
Merge pull request #58 from jbetancur/57-fix-table-cell-alignments
fix table cell alignments
2 parents b9caf7d + 8d3efb0 commit 4992057

24 files changed

Lines changed: 1577 additions & 411 deletions

‎README.md‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,11 @@ Nothing new here - we are using an array of object literals and properties to de
6161
| width | string | no | give the column a fixed width |
6262
| minWidth | string | no | give the column a minWidth |
6363
| maxWidth | string | no | give the column a maxWidth |
64-
| right | bool | no | right aligns the content in the cell |
65-
| center | bool | no | center aligns the content in the cell |
64+
| right | bool | no | right aligns the content in the cell. usefil for numbers |
65+
| center | bool | no | center aligns the content in the cell |
6666
| compact | bool | no | reduces the padding in the cell. useful for custom cells icons or buttons |
67-
| wrap | bool | no | whether the cell content shold be allowed to wrap. |
67+
| button | bool | no | applies additional styling when using a button |
68+
| wrap | bool | no | whether the cell content shold be allowed to wrap. |
6869
| allowOverflow | bool | no | allows content in the cell to overflow. useful for menus/layovers that do not rely on "smart" positioning |
6970
| ignoreRowClick | bool | no | prevents the `onRowClicked` event from being passed on a specific TableCell column. This is **really** useful for a menu or button where you do not want the `onRowClicked` triggered
7071

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-data-table-component",
3-
"version": "1.0.1",
3+
"version": "1.1.0",
44
"description": "A declarative react based data table",
55
"main": "dist/index.cjs.js",
66
"module": "dist/index.es.js",

‎src/DataTable/Cell.js‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import styled, { css } from 'styled-components';
2+
3+
export const CellBase = styled.div`
4+
position: relative;
5+
display: flex;
6+
box-sizing: border-box;
7+
line-height: normal;
8+
padding-left: calc(${props => props.theme.cells.cellPadding} / 6);
9+
padding-right: calc(${props => props.theme.cells.cellPadding} / 6);
10+
padding-top: calc(${props => props.theme.cells.cellPadding} / 12);
11+
padding-bottom: calc(${props => props.theme.cells.cellPadding} / 12);
12+
`;
13+
14+
// Default Cell Component
15+
export const Cell = styled(CellBase)`
16+
flex: ${props => (props.column.grow === 0 ? 0 : props.column.grow || 1)} 0 0;
17+
align-items: center;
18+
max-width: ${props => props.column.maxWidth || '100%'};
19+
min-width: ${props => (props.column.minWidth || '100px')};
20+
${props => props.column.width && css`
21+
min-width: ${props.column.width};
22+
max-width: ${props.column.width};
23+
`};
24+
${props => props.column.right && 'justify-content: flex-end'};
25+
${props => (props.column.center || props.column.button) && 'justify-content: center'};
26+
${props => props.column.compact && `padding: calc(${props.theme.cells.cellPadding} / 12)`};
27+
${props => !props.internalCell && css`
28+
&:first-child {
29+
padding-left: calc(${props.theme.cells.cellPadding} / 2);
30+
}
31+
`};
32+
33+
&:last-child {
34+
padding-right: calc(${props => props.theme.cells.cellPadding} / 2);
35+
}
36+
37+
${props => props.column.button && css`
38+
&:not(:last-child) {
39+
padding-right: calc(${props.theme.cells.cellPadding} / 2);
40+
}
41+
`};
42+
`;

‎src/DataTable/DataTable.js‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import ProgressWrapper from './ProgressWrapper';
1919
import TableWrapper from './TableWrapper';
2020
import NoData from './NoData';
2121
import { propTypes, defaultProps } from './propTypes';
22-
import { decorateColumns, getSortDirection, calcFirstCellIndex } from './util';
22+
import { decorateColumns, getSortDirection } from './util';
2323
import { handleSelectAll, handleRowSelected, toggleExpand, handleSort, clearSelected } from './statemgmt';
2424
import defaultTheme from '../themes/default';
2525

@@ -251,25 +251,26 @@ class DataTable extends Component {
251251
fixedHeader,
252252
pagination,
253253
paginationComponent,
254+
selectableRows,
255+
expandableRows,
254256
} = this.props;
255257

256258
const Pagination = paginationComponent;
257259

258260
const {
259261
rows,
260-
selectableRows,
261-
expandableRows,
262262
rowsPerPage,
263263
currentPage,
264264
} = this.state;
265265

266266
const theme = merge(defaultTheme, customTheme);
267267
const enabledPagination = pagination && !progressPending && rows.length > 0;
268+
268269
const init = {
269270
...this.props,
270271
...this.state,
271272
...{ columns: this.columns },
272-
...{ firstCellIndex: calcFirstCellIndex(selectableRows, expandableRows) },
273+
...{ internalCell: selectableRows || expandableRows },
273274
...{ onToggled: this.toggleExpand },
274275
};
275276

‎src/DataTable/DataTableContext.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export const defaultState = {
66
columns: [],
77
rows: [],
88
selectedRows: [],
9-
firstCellIndex: 0,
9+
internalCell: false,
1010
paginationPerPage: 10,
1111
paginationRowsPerPageOptions: [10, 15, 20, 25, 30],
1212
};

‎src/DataTable/ExpanderButton.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,8 @@ const ButtonStyle = styled.button`
66
outline: none;
77
border: none;
88
display: block;
9-
width: 42px;
10-
height: 42px;
9+
width: 40px;
10+
height: 40px;
1111
background-color: transparent;
1212
background-image: url(${props => props.theme.expander[props.expanded ? 'expandedButton' : 'collapsedButton']});
1313
background-position: center center;

‎src/DataTable/TableCell.js‎

Lines changed: 7 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,21 @@
11
import React, { memo } from 'react';
22
import PropTypes from 'prop-types';
3-
import styled, { withTheme, css } from 'styled-components';
3+
import styled, { withTheme } from 'styled-components';
44
import { DataTableConsumer } from './DataTableContext';
5+
import { Cell } from './Cell';
56
import { getProperty } from './util';
67

7-
const TableCellStyle = styled.div`
8-
position: relative;
9-
box-sizing: border-box;
10-
display: flex;
11-
flex: ${props => (props.column.grow === 0 ? 0 : props.column.grow || 1)} 0 0;
12-
align-items: center;
13-
max-width: ${props => props.column.maxWidth || '100%'};
14-
min-width: ${props => (props.column.minWidth || '100px')};
15-
${props => props.column.width && css`
16-
min-width: ${props.column.width};
17-
max-width: ${props.column.width};
18-
`};
19-
line-height: normal;
8+
const TableCellStyle = styled(Cell)`
209
font-size: ${props => props.theme.rows.fontSize};
2110
font-weight: 400;
2211
white-space: ${props => (props.column.wrap ? 'normal' : 'nowrap')};
12+
color: ${props => props.theme.rows.fontColor};
13+
min-height: ${props => props.theme.rows.height};
2314
2415
.react-data-table--cell-content {
2516
overflow: ${props => (props.column.allowOverflow ? 'visible' : 'hidden')};
2617
text-overflow: ellipsis;
2718
}
28-
29-
color: ${props => props.theme.rows.fontColor};
30-
min-height: ${props => props.theme.rows.height};
31-
${props => props.column.right && 'justify-content: flex-end'};
32-
${props => props.column.center && 'justify-content: center'};
33-
padding-top: 3px;
34-
padding-bottom: 3px;
35-
padding-left: calc(${props => props.theme.cells.cellPadding} / 2);
36-
padding-right: calc(${props => props.theme.cells.cellPadding} / 2);
37-
${props => props.firstCellIndex > 0 && css`
38-
&:nth-child(${props.firstCellIndex + 1}) {
39-
padding-left: calc(${props.theme.cells.cellPadding} / 6);
40-
}
41-
`};
42-
${props => props.column.compact && `padding: calc(${props.theme.cells.cellPadding} / 8)`};
4319
`;
4420

4521
const ClickClip = styled.div`
@@ -56,10 +32,10 @@ const TableCell = memo(({
5632
rowClickable,
5733
}) => (
5834
<DataTableConsumer>
59-
{({ firstCellIndex }) => (
35+
{({ internalCell }) => (
6036
<TableCellStyle
6137
column={column}
62-
firstCellIndex={firstCellIndex}
38+
internalCell={internalCell}
6339
>
6440
{!column.ignoreRowClick && rowClickable && (
6541
<ClickClip data-tag="___react-data-table--click-clip___" />

‎src/DataTable/TableCellCheckbox.js‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,15 @@ import React, { memo } from 'react';
22
import PropTypes from 'prop-types';
33
import styled, { withTheme } from 'styled-components';
44
import { DataTableConsumer } from './DataTableContext';
5+
import { CellBase } from './Cell';
56
import Checkbox from './Checkbox';
67

7-
const TableCellCheckboxStyle = styled.div`
8-
display: flex;
9-
flex: 0 0 42px;
8+
const TableCellCheckboxStyle = styled(CellBase)`
9+
flex: 0 0 48px;
1010
align-items: center;
11-
box-sizing: border-box;
12-
line-height: normal;
1311
font-size: ${props => props.theme.rows.fontSize};
1412
color: ${props => props.theme.rows.fontColor};
1513
min-height: ${props => props.theme.rows.height};
16-
padding-left: calc(${props => props.theme.cells.cellPadding} / 6);
17-
padding-left: calc(${props => props.theme.cells.cellPadding} / 6);
1814
`;
1915

2016
const TableCellCheckbox = memo(({

‎src/DataTable/TableCellExpander.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@ import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
33
import styled, { withTheme } from 'styled-components';
44
import { DataTableConsumer } from './DataTableContext';
5+
import { CellBase } from './Cell';
56
import ExpanderButton from './ExpanderButton';
67

7-
const TableCellExpanderStyle = styled.div`
8-
display: flex;
8+
const TableCellExpanderStyle = styled(CellBase)`
99
flex: 0 0 42px;
1010
align-items: center;
11-
box-sizing: border-box;
12-
vertical-align: middle;
1311
white-space: nowrap;
14-
line-height: normal;
1512
font-weight: 400;
1613
font-size: ${props => props.theme.rows.fontSize};
1714
color: ${props => props.theme.rows.fontColor};
1815
min-height: ${props => props.theme.rows.height};
19-
padding: 0;
16+
17+
&:not(:first-child) {
18+
padding-left: 0;
19+
}
2020
`;
2121

2222
class TableCellExpander extends PureComponent {

‎src/DataTable/TableCol.js‎

Lines changed: 5 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,17 @@
11
import React, { PureComponent } from 'react';
22
import PropTypes from 'prop-types';
33
import styled, { withTheme, css } from 'styled-components';
4+
import { Cell } from './Cell';
45
import { DataTableConsumer } from './DataTableContext';
56

6-
const TableColStyle = styled.div`
7-
box-sizing: border-box;
8-
display: flex;
9-
flex: ${props => (props.column.grow === 0 ? 0 : props.column.grow || 1)} 0 0;
10-
align-items: center;
11-
max-width: ${props => props.column.maxWidth || '100%'};
12-
min-width: ${props => (props.column.minWidth || '100px')};
13-
${props => props.column.width && css`
14-
min-width: ${props.column.width};
15-
max-width: ${props.column.width};
16-
`};
17-
line-height: normal;
18-
white-space: nowrap;
7+
const TableColStyle = styled(Cell)`
198
font-size: ${props => props.theme.header.fontSize};
209
user-select: none;
2110
font-weight: 500;
11+
white-space: nowrap;
2212
color: ${props => props.theme.header.fontColor};
2313
min-height: ${props => props.theme.header.height};
2414
${props => props.sortable && 'cursor: pointer'};
25-
${props => props.column.right && 'justify-content: flex-end'};
26-
${props => props.column.center && 'justify-content: center'};
27-
padding-left: calc(${props => props.theme.cells.cellPadding} / 2);
28-
padding-right: calc(${props => props.theme.cells.cellPadding} / 2);
29-
${props => props.firstCellIndex > 0 && css`
30-
&:nth-child(${props.firstCellIndex + 1}) {
31-
padding-left: calc(${props.theme.cells.cellPadding} / 6);
32-
}
33-
`};
34-
${props => props.column.compact && `padding: calc(${props.theme.cells.cellPadding} / 8)`};
3515
3616
&::before {
3717
font-size: 12px;
@@ -105,7 +85,7 @@ class TableCol extends PureComponent {
10585

10686
return (
10787
<DataTableConsumer>
108-
{({ sortIcon, sortColumn, sortDirection }) => {
88+
{({ sortIcon, sortColumn, sortDirection, internalCell }) => {
10989
const sortable = column.sortable && sortColumn === column.selector;
11090

11191
return (
@@ -116,6 +96,7 @@ class TableCol extends PureComponent {
11696
sortDirection={sortDirection}
11797
sortIcon={sortIcon}
11898
column={column}
99+
internalCell={internalCell}
119100
>
120101
{column.name && (
121102
<ColumnCellWrapper active={sortable}>

0 commit comments

Comments
 (0)