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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

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

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Communityβ€”every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple β€œthank you” goes a long wayβ€”express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay