diff --git a/plugins/woocommerce-admin/packages/components/src/table/style.scss b/plugins/woocommerce-admin/packages/components/src/table/style.scss index 319279abf91..0c4faed84ba 100644 --- a/plugins/woocommerce-admin/packages/components/src/table/style.scss +++ b/plugins/woocommerce-admin/packages/components/src/table/style.scss @@ -186,10 +186,15 @@ } .woocommerce-table__header, -.woocommerce-table__item { - @include font-size( 13 ); +.woocommerce-table__item, +.woocommerce-table__empty-item { padding: $gap $gap-large; border-bottom: 1px solid $core-grey-light-500; +} + +.woocommerce-table__header, +.woocommerce-table__item { + @include font-size( 13 ); text-align: left; > 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 { font-weight: normal; } diff --git a/plugins/woocommerce-admin/packages/components/src/table/table.js b/plugins/woocommerce-admin/packages/components/src/table/table.js index 9e00d761404..51ef5084177 100644 --- a/plugins/woocommerce-admin/packages/components/src/table/table.js +++ b/plugins/woocommerce-admin/packages/components/src/table/table.js @@ -117,6 +117,7 @@ class Table extends Component { } ); const sortedBy = query.orderby || get( find( headers, { defaultSort: true } ), 'key', false ); const sortDir = query.order || get( find( headers, { key: sortedBy } ), 'defaultOrder', DESC ); + const hasData = !! rows.length; return (