Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add a "no data" cell to the Table component.

This commit is contained in:
Jeff Stieler 2019-08-15 12:00:46 -07:00
parent e070648618
commit ccf0723faa
2 changed files with 49 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
plugins/woocommerce-admin/packages/components/src/table/style.scss
View File

@ -186,10 +186,15 @@
} }
.woocommerce-table__header, .woocommerce-table__header,
.woocommerce-table__item { .woocommerce-table__item,
@include font-size( 13 ); .woocommerce-table__empty-item {
padding: $gap $gap-large; padding: $gap $gap-large;
border-bottom: 1px solid $core-grey-light-500; border-bottom: 1px solid $core-grey-light-500;
}
.woocommerce-table__header,
.woocommerce-table__item {
@include font-size( 13 );
text-align: left; text-align: left;
> a:only-child { > a:only-child {
@ -243,6 +248,17 @@
} }
} }
.woocommerce-table__empty-item {
text-align: center;
@include font-size( 18 );
color: $core-grey-dark-300;
font-weight: bold;
@include breakpoint( '<782px' ) {
@include font-size( 13 );
}
}
th.woocommerce-table__item { th.woocommerce-table__item {
font-weight: normal; font-weight: normal;
} }

50
plugins/woocommerce-admin/packages/components/src/table/table.js
View File

@ -117,6 +117,7 @@ class Table extends Component {
} ); } );
const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false ); const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false );
const sortDir = query.order || get( find( headers, { key: sortedBy } ), 'defaultOrder', DESC ); const sortDir = query.order || get( find( headers, { key: sortedBy } ), 'defaultOrder', DESC );
const hasData = !! rows.length;
return ( return (
<div <div
@ -199,25 +200,36 @@ class Table extends Component {
); );
} ) } } ) }
</tr> </tr>
{ rows.map( ( row, i ) => ( { hasData
<tr key={ i }> ? (
{ row.map( ( cell, j ) => { rows.map( ( row, i ) => (
const { cellClassName, isLeftAligned, isNumeric } = headers[ j ]; <tr key={ i }>
const isHeader = rowHeader === j; { row.map( ( cell, j ) => {
const Cell = isHeader ? 'th' : 'td'; const { cellClassName, isLeftAligned, isNumeric } = headers[ j ];
const cellClasses = classnames( 'woocommerce-table__item', cellClassName, { const isHeader = rowHeader === j;
'is-left-aligned': isLeftAligned, const Cell = isHeader ? 'th' : 'td';
'is-numeric': isNumeric, const cellClasses = classnames( 'woocommerce-table__item', cellClassName, {
'is-sorted': sortedBy === headers[ j ].key, 'is-left-aligned': isLeftAligned,
} ); 'is-numeric': isNumeric,
return ( 'is-sorted': sortedBy === headers[ j ].key,
<Cell scope={ isHeader ? 'row' : null } key={ j } className={ cellClasses }> } );
{ getDisplay( cell ) } return (
</Cell> <Cell scope={ isHeader ? 'row' : null } key={ j } className={ cellClasses }>
); { getDisplay( cell ) }
} ) } </Cell>
</tr> );
) ) } } ) }
</tr>
) )
)
: (
<tr>
<td className="woocommerce-table__empty-item" colSpan={ headers.length }>
{ __( 'No data for the selected date range', 'woocommerce-admin' ) }
</td>
</tr>
)
}
</tbody> </tbody>
</table> </table>
</div> </div>