How to Render Tables in Mongoose Studio Dashboards

Dashboards are great for charts, but not every result belongs in a graph. Sometimes the clearest way to present data is a table: top customers, recent failed jobs, inventory snapshots, leaderboard rows, or any result where exact values matter.

Mongoose Studio dashboards support table output directly. If your dashboard code returns a $table object with columns and rows, Studio will render it as a proper table in the dashboard UI. That gives you a simple way to turn aggregation results or query output into something readable without building a frontend by hand.

The Shape of a Table Result

To render a table, return an object with a $table property. Inside $table, define the column names and the row data:

const users = await User.find().
  sort({ createdAt: -1 }).
  limit(5).
  lean();

return {
  $table: {
    columns: ['Name', 'Email', 'Created At'],
    rows: users.map(user => [
      user.name,
      user.email,
      user.createdAt?.toISOString()
    ])
  }
};

columns is an array of header labels, and rows is an array of row arrays. Each row should line up with the column order. That’s it. When Mongoose Studio sees $table, it renders the result as a table automatically.

For example, the raw code that generated the Arnold Schwarzenegger movies table above was the following, running on the MongoDB Atlas imdb data set.

const movies = await db.model('Movie').find({ 
    cast: 'Arnold Schwarzenegger', 
    year: { $gte: 1980, $lt: 1990 } 
});

const rows = movies.map(movie => [movie.title, movie.year, movie.imdb.rating]);
return { $table: { columns: ['Title', 'Year', 'Rating'], rows } };

Usage in Chat Tab

Scripts generated by Mongoose Studio chat can also use $table. As a matter of fact, the Arnold Schwarzenegger dashboard was generated by the chat tab.