Vue Example: Grouping
vue
<script setup lang="ts">
import {
FlexRender,
getCoreRowModel,
getExpandedRowModel,
getGroupedRowModel,
useVueTable,
type ColumnDef,
type ExpandedState,
type GroupingState,
} from '@tanstack/vue-table'
import { ref } from 'vue'
// Define task type
interface Task {
id: string
title: string
description: string
status: { id: string; name: string }
priority: { id: string; name: string }
dueDate: string
}
// Dummy data
const tasks: Task[] = [
{
id: '1',
title: 'Implement Authentication',
description: 'Set up OAuth2 with JWT tokens',
status: { id: 's1', name: 'In Progress' },
priority: { id: 'p1', name: 'High' },
dueDate: '2023-09-15',
},
{
id: '2',
title: 'Create Dashboard UI',
description: 'Design and implement main dashboard',
status: { id: 's2', name: 'To Do' },
priority: { id: 'p2', name: 'Medium' },
dueDate: '2023-09-20',
},
{
id: '3',
title: 'API Documentation',
description: 'Document all API endpoints using Swagger',
status: { id: 's1', name: 'In Progress' },
priority: { id: 'p1', name: 'High' },
dueDate: '2023-09-10',
},
{
id: '4',
title: 'Database Optimization',
description: 'Improve query performance and add indexes',
status: { id: 's3', name: 'Done' },
priority: { id: 'p3', name: 'Low' },
dueDate: '2023-08-30',
},
{
id: '5',
title: 'User Testing',
description: 'Conduct user testing sessions',
status: { id: 's2', name: 'To Do' },
priority: { id: 'p2', name: 'Medium' },
dueDate: '2023-09-25',
},
]
// Define columns
const columns: ColumnDef<Task>[] = [
{
accessorKey: 'title',
header: 'Title',
cell: ({ row }) => row.original.title,
},
{
accessorKey: 'status',
header: 'Status',
enableGrouping: true,
accessorFn: row => row.status.name,
cell: ({ row }) => row.original.status.name,
},
{
accessorKey: 'priority',
header: 'Priority',
enableGrouping: true,
accessorFn: row => row.priority.name,
cell: ({ row }) => row.original.priority.name,
},
{
accessorKey: 'description',
header: 'Description',
cell: ({ row }) => row.original.description,
},
{
accessorKey: 'dueDate',
header: 'Due Date',
cell: ({ row }) => new Date(row.original.dueDate).toLocaleDateString(),
},
]
// State for grouping
const grouping = ref<GroupingState>([])
const expanded = ref<ExpandedState>({})
// Initialize table
const table = useVueTable({
data: tasks,
columns,
getCoreRowModel: getCoreRowModel(),
getGroupedRowModel: getGroupedRowModel(),
getExpandedRowModel: getExpandedRowModel(),
state: {
get grouping() {
return grouping.value
},
get expanded() {
return expanded.value
},
},
onGroupingChange: updaterOrValue => {
grouping.value =
typeof updaterOrValue === 'function'
? updaterOrValue(grouping.value)
: updaterOrValue
},
onExpandedChange: updaterOrValue => {
expanded.value =
typeof updaterOrValue === 'function'
? updaterOrValue(expanded.value)
: updaterOrValue
},
})
// Group by status
const groupByStatus = (): void => {
grouping.value = ['status']
}
// Group by priority
const groupByPriority = (): void => {
grouping.value = ['priority']
}
// Clear grouping
const clearGrouping = (): void => {
grouping.value = []
}
</script>
<template>
<div class="row-grouping-container">
<h1 class="title">Vue Tanstack Table Example with Row Grouping</h1>
<!-- Grouping controls -->
<div class="grouping-controls">
<button
@click="groupByStatus"
class="group-button"
:class="{ active: grouping.includes('status') }"
>
Group by Status
</button>
<button
@click="groupByPriority"
class="group-button"
:class="{ active: grouping.includes('priority') }"
>
Group by Priority
</button>
<button
v-if="grouping.length > 0"
@click="clearGrouping"
class="clear-button"
>
Clear Grouping
</button>
</div>
<!-- Table -->
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th
v-for="header in table.getHeaderGroups()[0].headers"
:key="header.id"
>
{{ header.column.columnDef.header }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows"
:key="row.id"
:class="{ 'grouped-row': row.getIsGrouped() }"
>
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
<!-- Grouped cell -->
<div v-if="cell.getIsGrouped()" class="grouped-cell">
<button
class="expand-button"
@click="row.getToggleExpandedHandler()()"
>
<span v-if="row.getIsExpanded()" class="icon">👇</span>
<span v-else class="icon">👉</span>
<span class="group-value">{{ cell.getValue() }}</span>
<span class="group-count"> ({{ row.subRows.length }}) </span>
</button>
</div>
<!-- Aggregated cell -->
<div v-else-if="cell.getIsAggregated()">
{{ cell.getValue() }}
</div>
<!-- Placeholder cell -->
<div v-else-if="cell.getIsPlaceholder()"></div>
<!-- Regular cell -->
<div v-else>
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</div>
</td>
</tr>
<!-- Empty state -->
<tr v-if="table.getRowModel().rows.length === 0">
<td :colspan="columns.length" class="empty-table">
No tasks found.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<style scoped>
.row-grouping-container {
padding: 20px;
font-family: sans-serif;
}
.title {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
}
.grouping-controls {
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.group-button,
.clear-button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
}
.group-button {
background-color: #3b82f6;
color: white;
}
.group-button:hover {
background-color: #2563eb;
}
.group-button.active {
background-color: #1d4ed8;
}
.clear-button {
background-color: #6b7280;
color: white;
}
.clear-button:hover {
background-color: #4b5563;
}
.icon {
height: 16px;
width: 16px;
margin-right: 10px;
}
.table-container {
border: 1px solid #e5e7eb;
border-radius: 6px;
overflow: hidden;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
padding: 12px 16px;
text-align: left;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: #f9fafb;
color: #6b7280;
border-bottom: 1px solid #e5e7eb;
}
.data-table td {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
.grouped-row {
background-color: #3b82f6;
}
.grouped-cell {
font-weight: 500;
}
.expand-button {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 0;
font-size: inherit;
}
.group-value {
font-weight: 500;
}
.group-count {
margin-left: 8px;
color: #ffffff;
font-size: 12px;
}
.empty-table {
text-align: center;
color: #6b7280;
padding: 24px;
}
</style>
<script setup lang="ts">
import {
FlexRender,
getCoreRowModel,
getExpandedRowModel,
getGroupedRowModel,
useVueTable,
type ColumnDef,
type ExpandedState,
type GroupingState,
} from '@tanstack/vue-table'
import { ref } from 'vue'
// Define task type
interface Task {
id: string
title: string
description: string
status: { id: string; name: string }
priority: { id: string; name: string }
dueDate: string
}
// Dummy data
const tasks: Task[] = [
{
id: '1',
title: 'Implement Authentication',
description: 'Set up OAuth2 with JWT tokens',
status: { id: 's1', name: 'In Progress' },
priority: { id: 'p1', name: 'High' },
dueDate: '2023-09-15',
},
{
id: '2',
title: 'Create Dashboard UI',
description: 'Design and implement main dashboard',
status: { id: 's2', name: 'To Do' },
priority: { id: 'p2', name: 'Medium' },
dueDate: '2023-09-20',
},
{
id: '3',
title: 'API Documentation',
description: 'Document all API endpoints using Swagger',
status: { id: 's1', name: 'In Progress' },
priority: { id: 'p1', name: 'High' },
dueDate: '2023-09-10',
},
{
id: '4',
title: 'Database Optimization',
description: 'Improve query performance and add indexes',
status: { id: 's3', name: 'Done' },
priority: { id: 'p3', name: 'Low' },
dueDate: '2023-08-30',
},
{
id: '5',
title: 'User Testing',
description: 'Conduct user testing sessions',
status: { id: 's2', name: 'To Do' },
priority: { id: 'p2', name: 'Medium' },
dueDate: '2023-09-25',
},
]
// Define columns
const columns: ColumnDef<Task>[] = [
{
accessorKey: 'title',
header: 'Title',
cell: ({ row }) => row.original.title,
},
{
accessorKey: 'status',
header: 'Status',
enableGrouping: true,
accessorFn: row => row.status.name,
cell: ({ row }) => row.original.status.name,
},
{
accessorKey: 'priority',
header: 'Priority',
enableGrouping: true,
accessorFn: row => row.priority.name,
cell: ({ row }) => row.original.priority.name,
},
{
accessorKey: 'description',
header: 'Description',
cell: ({ row }) => row.original.description,
},
{
accessorKey: 'dueDate',
header: 'Due Date',
cell: ({ row }) => new Date(row.original.dueDate).toLocaleDateString(),
},
]
// State for grouping
const grouping = ref<GroupingState>([])
const expanded = ref<ExpandedState>({})
// Initialize table
const table = useVueTable({
data: tasks,
columns,
getCoreRowModel: getCoreRowModel(),
getGroupedRowModel: getGroupedRowModel(),
getExpandedRowModel: getExpandedRowModel(),
state: {
get grouping() {
return grouping.value
},
get expanded() {
return expanded.value
},
},
onGroupingChange: updaterOrValue => {
grouping.value =
typeof updaterOrValue === 'function'
? updaterOrValue(grouping.value)
: updaterOrValue
},
onExpandedChange: updaterOrValue => {
expanded.value =
typeof updaterOrValue === 'function'
? updaterOrValue(expanded.value)
: updaterOrValue
},
})
// Group by status
const groupByStatus = (): void => {
grouping.value = ['status']
}
// Group by priority
const groupByPriority = (): void => {
grouping.value = ['priority']
}
// Clear grouping
const clearGrouping = (): void => {
grouping.value = []
}
</script>
<template>
<div class="row-grouping-container">
<h1 class="title">Vue Tanstack Table Example with Row Grouping</h1>
<!-- Grouping controls -->
<div class="grouping-controls">
<button
@click="groupByStatus"
class="group-button"
:class="{ active: grouping.includes('status') }"
>
Group by Status
</button>
<button
@click="groupByPriority"
class="group-button"
:class="{ active: grouping.includes('priority') }"
>
Group by Priority
</button>
<button
v-if="grouping.length > 0"
@click="clearGrouping"
class="clear-button"
>
Clear Grouping
</button>
</div>
<!-- Table -->
<div class="table-container">
<table class="data-table">
<thead>
<tr>
<th
v-for="header in table.getHeaderGroups()[0].headers"
:key="header.id"
>
{{ header.column.columnDef.header }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows"
:key="row.id"
:class="{ 'grouped-row': row.getIsGrouped() }"
>
<td v-for="cell in row.getVisibleCells()" :key="cell.id">
<!-- Grouped cell -->
<div v-if="cell.getIsGrouped()" class="grouped-cell">
<button
class="expand-button"
@click="row.getToggleExpandedHandler()()"
>
<span v-if="row.getIsExpanded()" class="icon">👇</span>
<span v-else class="icon">👉</span>
<span class="group-value">{{ cell.getValue() }}</span>
<span class="group-count"> ({{ row.subRows.length }}) </span>
</button>
</div>
<!-- Aggregated cell -->
<div v-else-if="cell.getIsAggregated()">
{{ cell.getValue() }}
</div>
<!-- Placeholder cell -->
<div v-else-if="cell.getIsPlaceholder()"></div>
<!-- Regular cell -->
<div v-else>
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</div>
</td>
</tr>
<!-- Empty state -->
<tr v-if="table.getRowModel().rows.length === 0">
<td :colspan="columns.length" class="empty-table">
No tasks found.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</template>
<style scoped>
.row-grouping-container {
padding: 20px;
font-family: sans-serif;
}
.title {
font-size: 24px;
font-weight: 600;
margin-bottom: 16px;
}
.grouping-controls {
display: flex;
gap: 10px;
margin-bottom: 16px;
}
.group-button,
.clear-button {
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
display: flex;
align-items: center;
gap: 4px;
font-size: 14px;
}
.group-button {
background-color: #3b82f6;
color: white;
}
.group-button:hover {
background-color: #2563eb;
}
.group-button.active {
background-color: #1d4ed8;
}
.clear-button {
background-color: #6b7280;
color: white;
}
.clear-button:hover {
background-color: #4b5563;
}
.icon {
height: 16px;
width: 16px;
margin-right: 10px;
}
.table-container {
border: 1px solid #e5e7eb;
border-radius: 6px;
overflow: hidden;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table th {
padding: 12px 16px;
text-align: left;
font-size: 12px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
background-color: #f9fafb;
color: #6b7280;
border-bottom: 1px solid #e5e7eb;
}
.data-table td {
padding: 12px 16px;
border-bottom: 1px solid #e5e7eb;
}
.grouped-row {
background-color: #3b82f6;
}
.grouped-cell {
font-weight: 500;
}
.expand-button {
display: flex;
align-items: center;
gap: 4px;
background: none;
border: none;
cursor: pointer;
padding: 0;
font-size: inherit;
}
.group-value {
font-weight: 500;
}
.group-count {
margin-left: 8px;
color: #ffffff;
font-size: 12px;
}
.empty-table {
text-align: center;
color: #6b7280;
padding: 24px;
}
</style>
'%3e%3cg%20fill-rule='nonzero'%3e%3cpath%20d='m1099.4%20549.4v-12.5h-21.3l-12.5%2012.5z'%20fill='%23ff8b00'/%3e%3cpath%20d='m1123.4%20518.4h-26.7l-12.6%2012.5h39.3z'%20fill='%2355b2c6'/%3e%3cpath%20d='m1053.2%20561.9%206.4-6.4h21.6v12.5h-28z'%20fill='%23f00'/%3e%3cpath%20d='m1057.9%20543.3h13.8l12.6-12.5h-26.4z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1042.8%20561.9h10.4l12.4-12.5h-22.8z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1096.7%20518.4-6.4%206.4h-40.8v-12.5h47.2z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m828.6%20559.7h-19.6l-3.4%208.4h-8.6l18.1-42.4h7.5l18.1%2042.4h-8.7zm-2.7-6.7-7.1-17.3-7.1%2017.3z'%20fill='%23031c4c'/%3e%3cpath%20d='m960.1%20541.3c2.5-3.7%208.8-4.1%2011.4-4.1v7.2c-3.2%200-6.4.1-8.3%201.5s-2.9%203.3-2.9%205.6v16.6h-7.8v-30.9h7.5z'%20fill='%23031c4c'/%3e%3c/g%3e%3cpath%20d='m975.8%20537.2h7.8v30.9h-7.8z'%20fill='%23031c4c'/%3e%3cpath%20d='m975.8%20523.4h7.8v9.2h-7.8z'%20fill='%23031c4c'/%3e%3cpath%20d='m1022.3%20523.4v44.7h-7.5l-.2-4.7c-1.1%201.6-2.5%202.9-4.2%203.9-1.7.9-3.8%201.4-6.2%201.4-2.1%200-4.1-.4-5.8-1.1-1.8-.8-3.4-1.8-4.7-3.2s-2.4-3.1-3.1-5c-.8-1.9-1.1-4.1-1.1-6.5s.4-4.6%201.1-6.6c.8-2%201.8-3.7%203.1-5.1s2.9-2.5%204.7-3.3%203.7-1.2%205.8-1.2c2.4%200%204.4.4%206.1%201.3s3.1%202.1%204.2%203.8v-18.3h7.8zm-16.4%2038.6c2.6%200%204.6-.9%206.2-2.6s2.4-4%202.4-6.8-.8-5-2.4-6.8c-1.6-1.7-3.6-2.6-6.2-2.6-2.5%200-4.6.9-6.1%202.6-1.6%201.7-2.4%204-2.4%206.8s.8%205%202.4%206.7c1.6%201.8%203.6%202.7%206.1%202.7'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3cpath%20d='m885.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3cpath%20d='m946.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23031c4c'%20fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e)
'%3e%3cg%20fill-rule='nonzero'%3e%3cpath%20d='m1099.4%20549.4v-12.5h-21.3l-12.5%2012.5z'%20fill='%23ff8b00'/%3e%3cpath%20d='m1123.4%20518.4h-26.7l-12.6%2012.5h39.3z'%20fill='%2355b2c6'/%3e%3cpath%20d='m1053.2%20561.9%206.4-6.4h21.6v12.5h-28z'%20fill='%23f00'/%3e%3cpath%20d='m1057.9%20543.3h13.8l12.6-12.5h-26.4z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1042.8%20561.9h10.4l12.4-12.5h-22.8z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m1096.7%20518.4-6.4%206.4h-40.8v-12.5h47.2z'%20fill='%23b4bbbf'/%3e%3cpath%20d='m828.6%20559.7h-19.6l-3.4%208.4h-8.6l18.1-42.4h7.5l18.1%2042.4h-8.7zm-2.7-6.7-7.1-17.3-7.1%2017.3z'%20fill='%23fff'/%3e%3cpath%20d='m960.1%20541.3c2.5-3.7%208.8-4.1%2011.4-4.1v7.2c-3.2%200-6.4.1-8.3%201.5s-2.9%203.3-2.9%205.6v16.6h-7.8v-30.9h7.5z'%20fill='%23fff'/%3e%3c/g%3e%3cpath%20d='m975.8%20537.2h7.8v30.9h-7.8z'%20fill='%23fff'/%3e%3cpath%20d='m975.8%20523.4h7.8v9.2h-7.8z'%20fill='%23fff'/%3e%3cpath%20d='m1022.3%20523.4v44.7h-7.5l-.2-4.7c-1.1%201.6-2.5%202.9-4.2%203.9-1.7.9-3.8%201.4-6.2%201.4-2.1%200-4.1-.4-5.8-1.1-1.8-.8-3.4-1.8-4.7-3.2s-2.4-3.1-3.1-5c-.8-1.9-1.1-4.1-1.1-6.5s.4-4.6%201.1-6.6c.8-2%201.8-3.7%203.1-5.1s2.9-2.5%204.7-3.3%203.7-1.2%205.8-1.2c2.4%200%204.4.4%206.1%201.3s3.1%202.1%204.2%203.8v-18.3h7.8zm-16.4%2038.6c2.6%200%204.6-.9%206.2-2.6s2.4-4%202.4-6.8-.8-5-2.4-6.8c-1.6-1.7-3.6-2.6-6.2-2.6-2.5%200-4.6.9-6.1%202.6-1.6%201.7-2.4%204-2.4%206.8s.8%205%202.4%206.7c1.6%201.8%203.6%202.7%206.1%202.7'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3cpath%20d='m885.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3cpath%20d='m946.8%20544.2h-19.3v6.7h11c-.3%203.4-1.6%206-3.8%208.1-2.2%202-5%203-8.6%203-2%200-3.9-.4-5.5-1.1-1.7-.7-3.1-1.7-4.3-3.1-1.2-1.3-2.1-2.9-2.8-4.8s-1-3.9-1-6.2.3-4.3%201-6.2c.6-1.9%201.6-3.4%202.8-4.8%201.2-1.3%202.6-2.3%204.3-3.1%201.7-.7%203.5-1.1%205.6-1.1%204.2%200%207.4%201%209.6%203l5.2-5.2c-3.9-3-8.9-4.6-14.8-4.6-3.3%200-6.3.5-9%201.6s-5%202.5-6.9%204.4-3.4%204.2-4.4%206.9-1.5%205.7-1.5%208.9.5%206.2%201.6%208.9%202.5%205%204.4%206.9%204.2%203.4%206.9%204.4c2.7%201.1%205.7%201.6%208.9%201.6s6.1-.5%208.7-1.6%204.8-2.5%206.6-4.4%203.2-4.2%204.2-6.9%201.5-5.7%201.5-8.9v-1.3c-.3-.2-.4-.7-.4-1.1'%20fill='%23fff'%20fill-rule='nonzero'/%3e%3c/g%3e%3c/svg%3e)
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.