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

Amplify your impact where it matters most β€” building exceptional apps.

Leave the infrastructure headaches to us, while you focus on pushing boundaries, realizing your vision, and making a lasting impression on your users.

Get Started

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay