minor fixes

Author: Samuel Zeitler

README.md

@@ -272,13 +272,14 @@ The following will give you an overview how to configure the VueQuintable for yo
 
 ##### Property *cells* for property *rows* properties
 
-| Key | Type | Pre-condition | Description |
-| --------- | ------ | ---------------------------------------------------------- |------------------------------------------------------------------------------------------------------|
-| text | String | non of the following are set: *html*, *component* | Content string |
-| html | String | non of the following are set: *text*, *component* | HTML content string |
-| component | String | non of the following are set: *text*, *html* | Custom component object, see code example below. Should not be used, use slot *cell-content* instead |
-| classes | String | - | Additional CSS classes for cell |
-| align | String | - | Text alignment for whole column, this will overwrite *columns* and *rows* align values |
+| Key | Type | Pre-condition | Description |
+| --------- | ------- | --------------------------------------------------------- | ------------------------------------------------------------ |
+| text | String | non of the following are set: *html*, *component* | Content string |
+| html | String | non of the following are set: *text*, *component* | HTML content string |
+| component | String | non of the following are set: *text*, *html* | Custom component object, see code example below. Should not be used, use slot *cell-content* instead |
+| classes | String | - | Additional CSS classes for cell |
+| align | String | - | Text alignment for whole column, this will overwrite *columns* and *rows* align values |
+| isEmpty | Boolean | non of the following are set: *text*, *html*, *component* | Flag for custom cells (e.g for slot generation). This is checked for hiding empty cells and the flag will overwrite potential content of *text* and *html* if set to true |
 
 Lets have a look on an example for *rows* and *cells*
 

dist/vue-quintable.css

@@ -1,6 +1,6 @@
 {
  "name": "@sensetence/vue-quintable",
- "version": "2.3.4",
+ "version": "2.3.5",
  "private": false,
  "scripts": {
  "dev": "vite --config vite.build.config.js",

dist/vue-quintable.es.js

@@ -72,7 +72,7 @@
  <div
  class="cell-inner"
  :class="options.path + ' ' + options.path + '--html'"
- v-else-if="cell.html"
+ v-else-if="valueToString(cell.html)"
  v-html="cell.html"
  ></div>
  <div
@@ -630,6 +630,9 @@
  "
  @click="setSortColumn(cIndex)"
  :class="configFinal.columnClasses[cIndex]"
+ v-if="
+ showHeadlines[cIndex] || configFinal.sorts[cIndex]
+ "
  >
  <strong
  v-html="configFinal.headlines[cIndex]"
@@ -689,6 +692,12 @@
  </span>
  </td>
  <td
+ :colspan="
+ !showHeadlines[cIndex] &&
+ !configFinal.sorts[cIndex]
+ ? 2
+ : 1
+ "
  :class="
  configFinal.columnClasses[cIndex] +
  ' ' +
@@ -786,6 +795,9 @@
  "
  @click="setSortColumn(cIndex)"
  :class="configFinal.columnClasses[cIndex]"
+ v-if="
+ showHeadlines[cIndex] || configFinal.sorts[cIndex]
+ "
  >
  <strong
  v-html="configFinal.headlines[cIndex]"
@@ -846,6 +858,12 @@
  </td>
 
  <td
+ :colspan="
+ !showHeadlines[cIndex] &&
+ !configFinal.sorts[cIndex]
+ ? 2
+ : 1
+ "
  :class="
  configFinal.columnClasses[cIndex] +
  ' ' +
@@ -2990,7 +3008,17 @@ export default {
  *
  */
  valueToString: function (value) {
- return String(value);
+ switch (value) {
+ case "":
+ case null:
+ case false:
+ case undefined:
+ return "";
+ case 0:
+ case "0":
+ default:
+ return String(value);
+ }
  },
 
  /**
@@ -2999,20 +3027,36 @@ export default {
  */
  isColEmpty(i, rowIndex = -1) {
  const rowIndexes = rowIndex > -1 ? [rowIndex] : this.visibleRowIndexes;
- return (
- rowIndexes
- .map((index) => {
- return this.rowsFinal[index];
- })
- .filter((row) => {
- const cells = row.cells ? row.cells : row;
- return (
- this.valueToString(cells[i].text) ||
- cells[i].html ||
- cells[i].component
- );
- }).length <= 0
- );
+ const visibleCells = rowIndexes
+ .map((index) => {
+ return this.rowsFinal[index];
+ })
+ .filter((row) => {
+ const cells = row.cells ? row.cells : row;
+
+ if (
+ typeof cells[i].isEmpty === "boolean" &&
+ cells[i].isEmpty === true
+ ) {
+ return false;
+ }
+
+ if (
+ typeof cells[i].text !== "undefined" &&
+ this.valueToString(cells[i].text)
+ ) {
+ return true;
+ }
+
+ if (
+ typeof cells[i].html !== "undefined" &&
+ this.valueToString(cells[i].html)
+ ) {
+ return true;
+ }
+ return false;
+ });
+ return visibleCells.length <= 0;
  },
 
  /**
@@ -3055,7 +3099,7 @@ export default {
  return formatted;
  }
 
- return cell.html
+ return this.valueToString(cell.html)
  ? cell.html
  : this.valueToString(cell.text)
  ? cell.text

dist/vue-quintable.es.js.map

@@ -116,6 +116,11 @@ export default {
  sticky: true,
  sort: true,
  },
+ {
+ headline: "Description",
+ hideHeadlineBreakpoint: "xxl",
+ sticky: true,
+ },
  {
  headline: "Job",
  breakpoint: "all",
@@ -142,6 +147,9 @@ export default {
  {
  text: chance.city(),
  },
+ {
+ text: [...Array(50).keys()].map(() => chance.word()).join(" "),
+ },
  {
  text: chance.profession(),
  },

dist/vue-quintable.umd.js

@@ -26,6 +26,11 @@
  ></v-select>
  </div>
  </template>
+ <template #cell-content="{ cell }">
+ <div v-if="cell.type === 'word'">
+ {{ cell.value }}
+ </div>
+ </template>
  </VueQuintable>
 
  <button
@@ -42,23 +47,35 @@
  <!-- @formatter:off -->
  <pre
  data-toolbar-order="copy-to-clipboard"
- ><code class="language-markup">&lt;template&gt;
+ ><code class="language-markup" v-pre>&lt;template&gt;
  &lt;VueQuintable :dynamicConfig=&quot;dynamicConfig&quot; :config=&quot;config&quot; :rows=&quot;rows&quot;&gt;
  &lt;template v-slot:header&gt;
- &lt;div class=&quot;mb-3&quot;&gt;
- &lt;p-check class=&quot;p-switch&quot; v-model=&quot;hideAge&quot;&gt;Hide Age Column&lt;/p-check&gt;
- &lt;/div&gt;
- &lt;div class=&quot;mb-3&quot;&gt;
- &lt;p-check class=&quot;p-switch&quot; v-model=&quot;hideJob&quot;&gt;Hide Job Column&lt;/p-check&gt;
- &lt;/div&gt;
- &lt;div class=&quot;mb-3&quot;&gt;
- &lt;p-check class=&quot;p-switch&quot; v-model=&quot;hideColumns&quot;&gt;Hide empty columns automatically&lt;/p-check&gt;
- &lt;/div&gt;
- &lt;div class=&quot;mb-3&quot;&gt;
- &lt;v-select v-model=&quot;ignoreSortingColumns&quot; :reduce=&quot;option=&gt;option.value&quot; :options=&quot;ignoreOptions&quot; :clearable=&quot;false&quot;&gt;&lt;/v-select&gt;
- &lt;/div&gt;
+ &lt;div class=&quot;mb-3&quot;&gt;
+ &lt;p-check class=&quot;p-switch&quot; v-model=&quot;hideAge&quot;&gt;Hide Age Column&lt;/p-check&gt;
+ &lt;/div&gt;
+ &lt;div class=&quot;mb-3&quot;&gt;
+ &lt;p-check class=&quot;p-switch&quot; v-model=&quot;hideJob&quot;&gt;Hide Job Column&lt;/p-check&gt;
+ &lt;/div&gt;
+ &lt;div class=&quot;mb-3&quot;&gt;
+ &lt;p-check class=&quot;p-switch&quot; v-model=&quot;hideColumns&quot;
+ &gt;Hide empty columns automatically&lt;/p-check
+ &gt;
+ &lt;/div&gt;
+ &lt;div class=&quot;mb-3&quot;&gt;
+ &lt;v-select
+ v-model=&quot;ignoreSortingColumns&quot;
+ :reduce=&quot;(option) =&gt; option.value&quot;
+ :options=&quot;ignoreOptions&quot;
+ :clearable=&quot;false&quot;
+ &gt;&lt;/v-select&gt;
+ &lt;/div&gt;
  &lt;/template&gt;
- &lt;/VueQuintable&gt;
+ &lt;template #cell-content=&quot;{ cell }&quot;&gt;
+ &lt;div v-if=&quot;cell.type === 'word'&quot;&gt;
+ {{ cell.value }}
+ &lt;/div&gt;
+ &lt;/template&gt;
+ &lt;/VueQuintable&gt;
 &lt;/template&gt;
 &lt;script&gt;
 import VueQuintable from &quot;../components/VueQuintable.vue&quot;;
@@ -113,6 +130,10 @@ export default {
  headline: &quot;Birth country&quot;,
  breakpoint: &quot;lg&quot;,
  },
+ {
+ headline: &quot;Random Word&quot;,
+ breakpoint: &quot;xl&quot;,
+ },
  {
  headline: &quot;Job&quot;,
  hidden: this.hideJob,
@@ -135,9 +156,10 @@ export default {
  const city = i &lt; 13 ? &quot;&quot; : chance.city();
  //last entry with a birth place will be the 9. row
  const country = i &gt;= 9 ? &quot;&quot; : chance.country();
-
  //lase entry with name will be the 8. row
  const name = i &gt; 7 ? &quot;&quot; : chance.name({ nationality: &quot;en&quot; });
+ //hide cell thought it has content
+ const alwaysHide = i &lt; 15;
 
  rows.push([
  {
@@ -152,6 +174,12 @@ export default {
  {
  text: country,
  },
+ {
+ type: &quot;word&quot;,
+ text: &quot;asd&quot;,
+ isEmpty: alwaysHide,
+ value: chance.word(),
+ },
  {
  text: chance.profession(),
  },
@@ -243,6 +271,10 @@ export default {
  headline: "Birth country",
  breakpoint: "lg",
  },
+ {
+ headline: "Random Word",
+ breakpoint: "xl",
+ },
  {
  headline: "Job",
  hidden: this.hideJob,
@@ -265,9 +297,10 @@ export default {
  const city = i < 13 ? "" : chance.city();
  //last entry with a birth place will be the 9. row
  const country = i >= 9 ? "" : chance.country();
-
  //lase entry with name will be the 8. row
  const name = i > 7 ? "" : chance.name({ nationality: "en" });
+ //hide cell thought it has content
+ const alwaysHide = i < 15;
 
  rows.push([
  {
@@ -282,6 +315,11 @@ export default {
  {
  text: country,
  },
+ {
+ type: "word",
+ isEmpty: alwaysHide,
+ value: chance.word(),
+ },
  {
  text: chance.profession(),
  },