feat: input virtual can join other table

src/App.jsx

@@ -36,6 +36,12 @@ const Testing = () => {
                         filter={[
                             {name:"company_id",value: "442,722","logic_operator":"IN","operator":"AND"}
                         ]}
+                        joins={[
+                            {
+                            table: "vehicle_type",
+                            columns: ["min_speed", "max_speed"],
+                            },
+                        ]}
                         multiple
                     />
                 </ApiProvider>

src/components/ListVirtual.jsx

@@ -36,7 +36,8 @@ export default function ListVirtual({
   filter,
 	isApiGo = false,
   multiple,
-  customSxTextField = {}
+  customSxTextField = {},
+  joins = [],
 }) {
   const headersRequest = useApiHeaders();
   const [open, setOpen] = useState(false);
@@ -76,6 +77,10 @@ export default function ListVirtual({
       payload.addJoin("company", ["name"]);
     }
 
+    joins.forEach(join => {
+      payload.addJoin(join.table, join.columns);
+    });
+
     try {
       const res = await apiRequest.search(
 				url, 
@@ -217,7 +222,9 @@ export default function ListVirtual({
   };
 
   const displayValue = multiple
-    ? `${selected?.length || 0} ${label} selected`
+    ? (selected?.length > 0
+        ? `${selected.length} ${label} selected`
+        : "")
     : selected?.[name] || "";
 
   const isSelected = (row) => {
@@ -256,6 +263,10 @@ export default function ListVirtual({
         );
       }
 
+      joins.forEach(join => {
+        payload.addJoin(join.table, join.columns);
+      });
+
       requests.push(
         apiRequest.search(
           url,