DEV Community

Cover image for Day 22: How the Tables have turned 🏓
Valeria
Valeria

Posted on

1

Day 22: How the Tables have turned 🏓

It's almost time for a Christmas Table, but that's not the kind of tables I want to talk about today.

And this time there's no need to install a dependency: we'll touch upon built in console functionality that's ofter overlooked. I present to you console.table

Create a new file, e.g. main.ts and paste the following code:

const recipes = [
  {
    name: "Roast Turkey",
    ingredients: [
      "1 whole turkey",
      "salt",
      "pepper",
      "butter",
      "herbs (rosemary, thyme, sage)",
      "onion",
      "carrot",
      "celery",
    ],
    instructions:
      "Season the turkey with salt, pepper, and herbs. Stuff with onion, carrot, and celery. Roast at 350°F (175°C) for 3-4 hours or until internal temperature reaches 165°F (75°C).",
    difficulty: "Hard",
    time: "4-5 hours",
  },
  {
    name: "Gingerbread Cookies",
    ingredients: [
      "2 1/4 cups flour",
      "1 tsp baking soda",
      "1 tsp ground ginger",
      "1 tsp ground cinnamon",
      "1/2 tsp ground cloves",
      "1/2 tsp salt",
      "3/4 cup unsalted butter",
      "1 cup brown sugar",
      "1 egg",
      "1/4 cup molasses",
    ],
    instructions:
      "Mix dry ingredients. Beat butter and sugar until creamy, add egg and molasses. Combine wet and dry ingredients. Roll dough, cut shapes, and bake at 350°F (175°C) for 8-10 minutes.",
    difficulty: "Medium",
    time: "1 hour",
  },
  {
    name: "Eggnog",
    ingredients: [
      "4 cups whole milk",
      "1 cup heavy cream",
      "6 large eggs",
      "3/4 cup sugar",
      "1/2 tsp nutmeg",
      "1 tsp vanilla extract",
      "1/2 cup rum or bourbon (optional)",
    ],
    instructions:
      "Whisk eggs and sugar. Heat milk and cream gently, then slowly add egg mixture. Cook until thickened. Stir in vanilla, nutmeg, and alcohol if using. Chill before serving.",
    difficulty: "Easy",
    time: "30 minutes + chilling time",
  },
  {
    name: "Christmas Fruitcake",
    ingredients: [
      "2 cups mixed dried fruits",
      "1 cup nuts (walnuts, almonds)",
      "1 cup flour",
      "1 tsp baking powder",
      "1/2 tsp cinnamon",
      "1/2 tsp nutmeg",
      "1/2 cup brown sugar",
      "1/2 cup butter",
      "2 eggs",
    ],
    instructions:
      "Soak dried fruits in warm water or brandy. Cream butter and sugar, add eggs, and fold in dry ingredients and fruits. Bake at 300°F (150°C) for 2-3 hours.",
    difficulty: "Medium",
    time: "3-4 hours",
  },
  {
    name: "Candy Cane Hot Chocolate",
    ingredients: [
      "2 cups milk",
      "1/2 cup heavy cream",
      "1/2 cup chocolate chips",
      "2 tbsp cocoa powder",
      "2 tbsp sugar",
      "1 tsp vanilla extract",
      "2 candy canes (crushed)",
    ],
    instructions:
      "Heat milk, cream, cocoa powder, and sugar. Stir in chocolate chips until melted. Add vanilla and crushed candy canes. Serve with whipped cream and extra candy cane sprinkles.",
    difficulty: "Easy",
    time: "15 minutes",
  },
];

console.table(recipes, ["name", "difficulty", "time"]);
Enter fullscreen mode Exit fullscreen mode

Run it with e.g. deno run ./main.ts and enjoy a quick and well structured table with recipes overview:

deno run ./main.ts
┌───────┬────────────────────────────┬────────────┬──────────────────────────────┐
│ (idx) │ name                       │ difficulty │ time                         │
├───────┼────────────────────────────┼────────────┼──────────────────────────────┤
│     0 │ "Roast Turkey""Hard""4-5 hours"                  │
│     1 │ "Gingerbread Cookies""Medium""1 hour"                     │
│     2 │ "Eggnog""Easy""30 minutes + chilling time" │
│     3 │ "Christmas Fruitcake""Medium""3-4 hours"                  │
│     4 │ "Candy Cane Hot Chocolate""Easy""15 minutes"                 │
└───────┴────────────────────────────┴────────────┴──────────────────────────────┘
Enter fullscreen mode Exit fullscreen mode

Neat isn't it? This method works for object and arrays and without the second argument it would render all properties, which can result in a bit of a messy output:

Messy misaligned table

Which is unfortunate, but in the end of the data, maybe if data table doesn't fit into a screen we could use another format of representing it, e.g. console.dir?

Liked the content and would love to have more of it all year long?

Buy Me A Coffee

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

Top comments (0)

Retry later