Wasp-lang•3mo ago

Is there a table component?

Hi, I'm new here. Just wanted to know if there's a table component I can import. I need a dashboard and a table page that shows users can see their product database they put in.

2 Replies

kapa.ai•3mo ago

Hi @TCempire. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Hmm, I don't know enough to give you a confident answer yet. Wasp does not provide a built-in table component. However, it does provide automatic CRUD (Create, Read, Update, Delete) operations that you can use to interact with your database. You can use these operations to fetch data from your database and display it in a table format using a table component from a library of your choice. For example, you can use the getAll query to fetch all records of a certain entity from your database. Here is an example of how you can use it:

import { Tasks } from 'wasp/client/crud'  
import { useState } from 'react'  
  
export const MainPage = () => {  
 const { data: tasks, isLoading, error } = Tasks.getAll.useQuery()  
 const createTask = Tasks.create.useAction()  
 const [taskDescription, setTaskDescription] = useState('')  
  
 function handleCreateTask() {  
 createTask({ description: taskDescription, isDone: false })  
 setTaskDescription('')  
 }  
  
 if (isLoading) return <div>Loading...</div>  
 if (error) return <div>Error: {error.message}</div>  
 return (  
 <div  
 style={{  
 fontSize: '1.5rem',  
 display: 'grid',  
 placeContent: 'center',  
 height: '100vh',  
 }}  
 >  
 <div>  
 <input  
 value={taskDescription}  
 onChange={(e) => setTaskDescription(e.target.value)}  
 />  
 <button onClick={handleCreateTask}>Create task</button>  
 </div>  
 <ul>  
 {tasks.map((task) => (  
 <li key={task.id}>{task.description}</li>  
 ))}  
 </ul>  
 </div>  
 )  
}

import { Tasks } from 'wasp/client/crud'  
import { useState } from 'react'  
  
export const MainPage = () => {  
 const { data: tasks, isLoading, error } = Tasks.getAll.useQuery()  
 const createTask = Tasks.create.useAction()  
 const [taskDescription, setTaskDescription] = useState('')  
  
 function handleCreateTask() {  
 createTask({ description: taskDescription, isDone: false })  
 setTaskDescription('')  
 }  
  
 if (isLoading) return <div>Loading...</div>  
 if (error) return <div>Error: {error.message}</div>  
 return (  
 <div  
 style={{  
 fontSize: '1.5rem',  
 display: 'grid',  
 placeContent: 'center',  
 height: '100vh',  
 }}  
 >  
 <div>  
 <input  
 value={taskDescription}  
 onChange={(e) => setTaskDescription(e.target.value)}  
 />  
 <button onClick={handleCreateTask}>Create task</button>  
 </div>  
 <ul>  
 {tasks.map((task) => (  
 <li key={task.id}>{task.description}</li>  
 ))}  
 </ul>  
 </div>  
 )  
}

In this example, Tasks.getAll.useQuery() is used to fetch all tasks from the database. You can replace Tasks with the entity that represents your products. For the table component, you can use any React table library that you prefer, such as react-table or material-table. For more information, you can check out the Wasp documentation on CRUD (https://wasp-lang.dev/docs/data-model/crud#using-the-generated-crud-operations-on-the-client). ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @TCempire, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•3mo ago

Hey @TCempire, Wasp doesn't have its own official UI table component, if that's what you're asking. You can use any UI table library you want and install it as a dependency.

Gaming

Programming

Is there a table component?