# Table - Fetch Records

##### Back to Table Component Documentation

The `setupFetchRecords` function is used to configure the table to fetch records dynamically. It takes two parameters: the total number of records and a function that fetching records. It should be an asynconous function that returns/resolves an array of records that will populate the table.

In this example, the `simulateFetchRecords` function generates a specified number of random contact records and resolves the promise after a delay, simulating an asynchronous fetch operation.

    <k-table
      id="fetchRecordsExample"
      enable-pages="true"
      page-size="10"
    >
      <div class="d-f full">
        <div>
          <k-tc-first-page></k-tc-first-page>
          <k-tc-prev-page></k-tc-prev-page>
          <k-tc-next-page></k-tc-next-page>
          <k-tc-last-page></k-tc-last-page>
        </div>
        <div class="flex"></div>
        <div>
          <k-tc-page-select></k-tc-page-select>
        </div>
        <div class="flex"></div>
        <div>
          <k-tc-page-size></k-tc-page-size>
        </div>
      </div>
    </k-table>
    <script type="module">
      import '../kempo/components/tableControls/FirstPage.js';
      import '../kempo/components/tableControls/PrevPage.js';
      import '../kempo/components/tableControls/NextPage.js';
      import '../kempo/components/tableControls/LastPage.js';
      import '../kempo/components/tableControls/PageSelect.js';
      import '../kempo/components/tableControls/PageSize.js';

      function simulateFetchRecords(start, count){
        return new Promise(res => {
          const newRecords = [];
          for(let i=0; i<count; i++){
            newRecords.push(generateContact());
          }
          setTimeout(()=>res(newRecords), 1000);
        });
      }

      const $table = document.getElementById('fetchRecordsExample');

      $table.setRecords(contacts);
      $table.setupFetchRecords(100, simulateFetchRecords);
    </script>