From fff60a960e15d53d9920fa318a58e30becebddb2 Mon Sep 17 00:00:00 2001
From: rldhont <rldhont@gmail.com>
Date: Fri, 4 Jul 2025 08:02:00 +0200
Subject: [PATCH] lizmap-features-table: Display a message when no features
 found

lizmap-features-table always displayed a table even if it is empty.
We propose to display a message when the table is empty and an optional
attribut has been added to be able to defined a message to display.

Funded by CA Grand Narbonne
---
 assets/src/components/FeaturesTable.js | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/assets/src/components/FeaturesTable.js b/assets/src/components/FeaturesTable.js
index c488d02c71..1a391f1299 100644
--- a/assets/src/components/FeaturesTable.js
+++ b/assets/src/components/FeaturesTable.js
@@ -35,6 +35,7 @@ import GeoJSON from 'ol/format/GeoJSON.js';
  *      (optional) data-center-to-highlighted-feature-geometry="true"
  *      (optional) data-max-features="100"
  *      (optional) data-active-item-feature-id="5"
+ *      (optional) data-empty-message="No features found"
  * >
  *      <lizmap-field
  *          data-alias="District's name"
@@ -607,6 +608,7 @@ export default class FeaturesTable extends HTMLElement {
         this._template = () => html`
             <div class="lizmap-features-table" data-features-count="${this.features.length}">
                 <h4>${this.layerTitle}</h4>
+                ${this.features.length > 0 ? html`
                 <div class="lizmap-features-table-toolbar">
                     <button class="btn btn-mini previous-popup"
                         title="${lizDict['featuresTable.toolbar.previous']}"
@@ -654,6 +656,11 @@ export default class FeaturesTable extends HTMLElement {
                     </tbody>
                 </table>
                 <div class="lizmap-features-table-item-popup"></div>
+                ` : html`
+                <div class="lizmap-features-table-empty">
+                    ${this.dataset.emptyMessage ? this.dataset.emptyMessage : 'No features found'}
+                </div>
+                `}
             </div>
         `;