Example for list of value

doc/gui/extension/example_library/example_library.py

@@ -42,14 +42,15 @@ class ExampleLibrary(ElementLibrary):
                 # element, exported as GameTable in front-end/src/index.ts
                 # react_component="GameTable",
             ),
-            "list_of_languages": Element(
+            "list_item": Element(
                 "lov",
                 {
                     "lov": ElementProperty(PropertyType.lov),
+                    "sort": ElementProperty(PropertyType.string),
                 },
                 # The name of the React component (TodoList) that implements this custom
                 # element, exported as TodoList in front-end/src/index.ts
-                # react_component="ListOfLanguages",
+                # react_component="ListItem",
             )
         }
 

doc/gui/extension/example_library/front-end/src/ListItem.tsx

@@ -0,0 +1,50 @@
+import React, { useMemo } from "react";
+import { LoV, useLovListMemo } from "taipy-gui";
+
+interface ToDoListProps {
+    lov?: LoV;
+    defaultLov?: string;
+    sort?: "asc" | "desc";
+}
+
+const styles = {
+    listItem: {
+        display: "flex",
+        alignItems: "center",
+    },
+    listItemImage: {
+        marginRight: "8px",
+        width: "1em",
+        height: "1em",
+    },
+};
+
+const ListItem: React.FC<ToDoListProps> = ({ lov, defaultLov = "", sort }) => {
+    const lovList = useLovListMemo(lov, defaultLov);
+
+    const sortedLovList = useMemo(() => {
+        if (sort) {
+            return lovList.slice().sort((a, b) => {
+                return sort === "asc" ? a.id.localeCompare(b.id) : b.id.localeCompare(a.id);
+            });
+        }
+        return lovList;
+    }, [lovList, sort]);
+
+    return (
+        <div>
+            <ul>
+                {sortedLovList.map((todo, index) => (
+                    <li key={index} style={styles.listItem}>
+                        {typeof todo.item === "string" ? null : (
+                            <img src={todo.item.path} alt={todo.item.text} style={styles.listItemImage} />
+                        )}
+                        {todo.id}
+                    </li>
+                ))}
+            </ul>
+        </div>
+    );
+};
+
+export default ListItem;

doc/gui/extension/example_library/front-end/src/index.ts

@@ -8,6 +8,6 @@
 // the name used in the element declaration in the element library.
 import ColoredLabel from "./ColoredLabel";
 import GameTable from "./GameTable";
-import ListOfLanguages from "./ListOfLanguages";
+import ListItem from "./ListItem";
 
-export { ColoredLabel as ExampleLabel, GameTable, ListOfLanguages };
+export { ColoredLabel as ExampleLabel, GameTable, ListItem };

doc/gui/extension/list_of_languages.py → doc/gui/extension/list_item.py

@@ -10,25 +10,20 @@
 # specific language governing permissions and limitations under the License.
 from example_library import ExampleLibrary
 
-from taipy.gui import Gui
+from taipy.gui import Gui, Icon
 
 languages = [
-    "Python",
-    "JavaScript",
-    "TypeScript",
-    "Java",
-    "C++",
-    "Ruby",
-    "Go",
-    "Swift",
-    "Kotlin",
-    "Rust",
+    ["Python", Icon("./python.png", "Python logo")],
+    ["JavaScript", Icon("./javascript.png", "JavaScript logo")],
+    ["TypeScript", Icon("./typescript.png", "TypeScript logo")],
+    ["Java", Icon("./java.png", "Java logo")],
+    ["C++", Icon("./cpp.png", "C++ logo")],
 ]
 
 page = """
-Please select the programming languages you are familiar with:
-<|{languages}|example.list_of_languages|>
+The list of programming languages is as follows:
+<|{languages}|example.list_item|sort=asc|>
 """
 
 if __name__ == "__main__":
-    Gui(page, libraries=[ExampleLibrary()]).run(title="Programming language selection")
+    Gui(page, libraries=[ExampleLibrary()]).run(title="List of item")