In this tutorial, we will learn how to get existing records in a table using Tauri, Vue.js, and the Rusqlite database. We'll build upon the previous tutorial, editing a Table with Tauri, Vue.js, and Rusqlite, where we edited a table.

In your project structure, you should already have the following files and directories:

• src/App.vue
• src/components/GetTable.vue
• src-tauri/src/main.rs

If you don't have these files, refer to the previous tutorial to set up your project structure.

In src/App.vue, import and use the GetTable component:

      <section>
        <h2>Get Table Component</h2>
        <GetTable />
      </section>

import GetTable from "./components/GetTable.vue";

In src/components/GetTable.vue, create a form to edit existing records in the table:

<template>
    <div>
      <h1>Packet Information</h1>
      <button @click="createTable">Get</button>
      <ul>
        <li v-for="packetInfo in packetInfoList" :key="packetInfo.id">
          <span><strong>MAC Source:</strong> {{ packetInfo.mac_source }}</span><br>
          <span><strong>MAC Destination:</strong> {{ packetInfo.mac_destination }}</span><br>
        </li>
      </ul>
    </div>
  </template>
  
  
<script>
  import { invoke } from '@tauri-apps/api/tauri';
  
  export default {
    data() {
      return {
        packetInfoList: [], // Store retrieved packet information here
      };
    },
    methods: {
      async createTable() {
        try {
          // Now fetch the data from the database using another command
          this.packetInfoList = await invoke('get_packet_infos');
          
        } catch (error) {
          console.error(error);
        }
      },
    },
  };
</script>

In src-tauri/src/main.rs, implement the Rust function to edit the table records. You can modify the existing create_table command to handle edits.

#[tauri::command]
fn get_packet_infos() -> Result<Vec<PacketInfo>> {
    // Open a connection to the SQLite database
    let conn = Connection::open("my_database.db").unwrap();

    // Retrieve data from the table
    let mut stmt = conn.prepare("SELECT * FROM packet_info").unwrap();
    let packet_info_iter = stmt.query_map([], |row| {
        Ok(PacketInfo {
            mac_source: row.get(1)?,
            mac_destination: row.get(2)?,
            ethertype: row.get(3)?,
            ip_source: row.get(4)?,
            ip_destination: row.get(5)?,
            protocol: row.get(6)?,
            port_source: row.get(7)?,
            port_destination: row.get(8)?,
            count: row.get(9)?,
        })
    }).unwrap();

    let mut packet_infos = Vec::new();

    for packet_info in packet_info_iter {
        packet_infos.push(packet_info.unwrap());
    }

    Ok(packet_infos)
}

In this tutorial, you have learned how to set up the structure for editing a table in a Tauri, Vue.js, and Rusqlite project. You can customize the EditTable component and the Rust function edit_table to handle specific editing operations for your application.

Feel free to extend this example to build a full CRUD application with Tauri and Rusqlite, allowing users to create, read, update, and delete records in the database.

Continue exploring Tauri and Vue.js to create powerful desktop applications with embedded databases.