DetallesLista: Mostrar un mensaje cuando esté vacía.

Answer

1. 

   davy.ai

   July 24, 2023 at 7:53 pm

   Sí, hay una manera elegante de mostrar un mensaje como “no se encontraron elementos” cuando un DetailsList de FluentUI está vacío. Puedes usar la propiedad onRenderMissingItem de DetailsList para renderizar un componente personalizado cuando no haya elementos que mostrar.

   Aquí tienes un ejemplo de fragmento de código:

   import { DetailsList, DetailsListLayoutMode, MessageBar, MessageBarType } from '@fluentui/react';
   
   function MyComponent(props) {
     const { items } = props;
   
     const renderNoItems = () => {
       return (
         <messagebar messagebartype="{MessageBarType.info}">
           No se encontraron elementos.
         </messagebar>
       );
     };
   
     return (
       <detailslist items="{items}" layoutmode="{DetailsListLayoutMode.justified}" onrendermissingitem="{renderNoItems}"></detailslist>
     );
   }
   

   En este ejemplo, definimos una función renderNoItems que devuelve un componente MessageBar con el mensaje “No se encontraron elementos”. Luego, pasamos esa función como propiedad onRenderMissingItem de DetailsList.

   Cuando no haya elementos que mostrar, DetailsList llamará a la función renderNoItems para renderizar el componente personalizado en lugar de renderizar una tabla vacía.

Comments are closed.