diff --git a/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap b/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap
index d8a99e973..9924f4a9d 100644
--- a/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap
+++ b/src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap
@@ -93,6 +93,61 @@ exports[`EcSmartTable #slots should pass ec-table slots 1`] = `
`;
+exports[`EcSmartTable #slots should render custom slot if window width is lower than 768px 1`] = `
+
+`;
+
exports[`EcSmartTable #slots should render empty data with custom template 1`] = `
{
expect(wrapper.findByDataTest('ec-table__row--0').element).toMatchSnapshot();
});
+ it('should render custom slot if window width is lower than 768px', () => {
+ window.matchMedia = jest.fn().mockImplementation(query => ({
+ matches: query === '(max-width: 768px)',
+ media: '',
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ }));
+
+ const wrapper = mountEcSmartTableWithData(data, {
+ columns,
+ }, {
+ slots: {
+ default: props => h('div', `Custom slot data: ${JSON.stringify(props)}`),
+ col1: props => h('div', `Cell data: ${JSON.stringify(props)}`),
+ },
+ });
+
+ expect(wrapper.element).toMatchSnapshot();
+ });
+
it('should only render custom slot if "isCustomSlotShown" is true', () => {
const wrapper = mountEcSmartTableWithData(data, {
columns,
diff --git a/src/components/ec-smart-table/ec-smart-table.vue b/src/components/ec-smart-table/ec-smart-table.vue
index 087e25e4b..93f37ec91 100644
--- a/src/components/ec-smart-table/ec-smart-table.vue
+++ b/src/components/ec-smart-table/ec-smart-table.vue
@@ -167,7 +167,7 @@ const props = defineProps({
error: [Error, Object, String],
isCustomSlotShown: {
type: Boolean,
- default: () => false,
+ default: () => undefined,
},
});
diff --git a/src/components/ec-table/ec-table.spec.js b/src/components/ec-table/ec-table.spec.js
index 114a931c7..fd404756b 100644
--- a/src/components/ec-table/ec-table.spec.js
+++ b/src/components/ec-table/ec-table.spec.js
@@ -260,7 +260,13 @@ describe('EcTable', () => {
});
it('should render custom slot if window width is lower than 768px', () => {
- global.innerWidth = 500;
+ window.matchMedia = jest.fn().mockImplementation(query => ({
+ matches: query === '(max-width: 768px)',
+ media: '',
+ onchange: null,
+ addListener: jest.fn(),
+ removeListener: jest.fn(),
+ }));
const wrapper = mountEcTable({
columns: [
diff --git a/src/components/ec-table/ec-table.vue b/src/components/ec-table/ec-table.vue
index c2fd328b0..b9e554948 100644
--- a/src/components/ec-table/ec-table.vue
+++ b/src/components/ec-table/ec-table.vue
@@ -106,13 +106,13 @@ const props = defineProps({
title: String,
isCustomSlotShown: {
type: Boolean,
- default: () => false,
+ default: () => undefined,
},
});
const numberOfColumns = computed(() => (props.columns.length || (props.data[0] && props.data[0].length) || null));
const maxHeightStyle = computed(() => (props.maxHeight ? { maxHeight: `${props.maxHeight}` } : null));
-const canShowCustomSlot = computed(() => (props.isCustomSlotShown || (hasSlot('default') && isInCustomSlotThreshold.value)));
+const canShowCustomSlot = computed(() => (props.isCustomSlotShown || (props.isCustomSlotShown === undefined && hasSlot('default') && isInCustomSlotThreshold.value)));
function onSort(columnName) {
emit('sort', columnName);