• Edit
  • Download
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script nonce="undefined" src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <script nonce="undefined" src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    9.   <style>
    10.     body {
    11.       background: #e6e6e6;
    12.     }
    13.  
    14.     zing-grid[loading] {
    15.       height: 148px;
    16.     }
    17.   </style>
    18. </head>
    19.  
    20. <body>
    21.   <h3>Grid modified to retrieve 15 records in descending order with readCustomFunction ZGParam.</h3>
    22.   <zing-grid caption="SupabaseJS Demo" sort pager>
    23.     <zg-data adapter="supabaseJS">
    24.       <zg-param name="dataTable" value="got_deaths"></zg-param>
    25.       <zg-param name="idKey" value="order"></zg-param>
    26.       <zg-param name="readCustomFunction" value="read"></zg-param>
    27.     </zg-data>
    28.   </zing-grid>
    29.   <script>
    30.     ZingGrid.setLicense(['26ccbfec16b8be9ee98c7d57bee6e498']);
    31.     var __awaiter = (this && this.__awaiter) || function(thisArg, _arguments, P, generator) {
    32.       function adopt(value) {
    33.         return value instanceof P ? value : new P(function(resolve) {
    34.           resolve(value);
    35.         });
    36.       }
    37.       return new(P || (P = Promise))(function(resolve, reject) {
    38.         function fulfilled(value) {
    39.           try {
    40.             step(generator.next(value));
    41.           } catch (e) {
    42.             reject(e);
    43.           }
    44.         }
    45.  
    46.         function rejected(value) {
    47.           try {
    48.             step(generator["throw"](value));
    49.           } catch (e) {
    50.             reject(e);
    51.           }
    52.         }
    53.  
    54.         function step(result) {
    55.           result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    56.         }
    57.         step((generator = generator.apply(thisArg, _arguments || [])).next());
    58.       });
    59.     };
    60.     const supabaseUrl = 'https://lhwlegxfcypdjfbwcjod.supabase.co';
    61.     const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imxod2xlZ3hmY3lwZGpmYndjam9kIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQ2NTAwMDEsImV4cCI6MjA1MDIyNjAwMX0.nrFUmXsWlylWRswjBB844W31LgHV-_KCf5_c9PpMdEk';
    62.     const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
    63.     ZingGrid.registerClient(supabaseClient);
    64.  
    65.     function read(opt) {
    66.       return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function*() {
    67.         const {
    68.           data,
    69.           error
    70.         } = yield supabaseClient
    71.           .from('got_deaths')
    72.           .select()
    73.           .order('order', {
    74.             ascending: false
    75.           })
    76.           .limit(10);
    77.         opt.callback(data);
    78.       }));
    79.     };
    80.   </script>
    81. </body>
    82.  
    83. </html>
    1. <!DOCTYPE html>
    2. <html class="zc-html">
    3.  
    4. <head>
    5.   <meta charset="utf-8">
    6.   <title>ZingGrid: Simple Grid</title>
    7.   <script src="https://cdn.zinggrid.com/zinggrid.min.js"></script>
    8.   <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    9. </head>
    10.  
    11. <body>
    12.   <h3>Grid modified to retrieve 15 records in descending order with readCustomFunction ZGParam.</h3>
    13.   <zing-grid caption="SupabaseJS Demo" sort pager>
    14.     <zg-data adapter="supabaseJS">
    15.       <zg-param name="dataTable" value="got_deaths"></zg-param>
    16.       <zg-param name="idKey" value="order"></zg-param>
    17.       <zg-param name="readCustomFunction" value="read"></zg-param>
    18.     </zg-data>
    19.   </zing-grid>
    20. </body>
    21.  
    22. </html>
    1. body {
    2.   background: #e6e6e6;
    3. }
    1. var __awaiter = (this && this.__awaiter) || function(thisArg, _arguments, P, generator) {
    2.   function adopt(value) {
    3.     return value instanceof P ? value : new P(function(resolve) {
    4.       resolve(value);
    5.     });
    6.   }
    7.   return new(P || (P = Promise))(function(resolve, reject) {
    8.     function fulfilled(value) {
    9.       try {
    10.         step(generator.next(value));
    11.       } catch (e) {
    12.         reject(e);
    13.       }
    14.     }
    15.  
    16.     function rejected(value) {
    17.       try {
    18.         step(generator["throw"](value));
    19.       } catch (e) {
    20.         reject(e);
    21.       }
    22.     }
    23.  
    24.     function step(result) {
    25.       result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
    26.     }
    27.     step((generator = generator.apply(thisArg, _arguments || [])).next());
    28.   });
    29. };
    30. const supabaseUrl = 'https://lhwlegxfcypdjfbwcjod.supabase.co';
    31. const supabaseKey = 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Imxod2xlZ3hmY3lwZGpmYndjam9kIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MzQ2NTAwMDEsImV4cCI6MjA1MDIyNjAwMX0.nrFUmXsWlylWRswjBB844W31LgHV-_KCf5_c9PpMdEk';
    32. const supabaseClient = supabase.createClient(supabaseUrl, supabaseKey);
    33. ZingGrid.registerClient(supabaseClient);
    34.  
    35. function read(opt) {
    36.   return new Promise((resolve, reject) => __awaiter(this, void 0, void 0, function*() {
    37.     const {
    38.       data,
    39.       error
    40.     } = yield supabaseClient
    41.       .from('got_deaths')
    42.       .select()
    43.       .order('order', {
    44.         ascending: false
    45.       })
    46.       .limit(10);
    47.     opt.callback(data);
    48.   }));
    49. };