Vue Example: Column Pinning
vue
<script setup lang="ts">
import {
createColumnHelper,
FlexRender,
getCoreRowModel,
useVueTable,
} from '@tanstack/vue-table'
import type {
Column,
ColumnOrderState,
ColumnPinningState,
} from '@tanstack/vue-table'
import { makeData, type Person } from './makeData'
import { ref } from 'vue'
import { faker } from '@faker-js/faker'
const data = ref(makeData(5000))
const columnHelper = createColumnHelper<Person>()
const columns = ref([
columnHelper.group({
// id: 'Name',
header: 'Name',
footer: props => props.column.id,
columns: [
columnHelper.accessor('firstName', {
cell: info => info.getValue(),
footer: props => props.column.id,
}),
columnHelper.accessor(row => row.lastName, {
id: 'lastName',
cell: info => info.getValue(),
header: () => 'Last Name',
footer: props => props.column.id,
}),
],
}),
columnHelper.group({
header: 'Info',
footer: props => props.column.id,
columns: [
columnHelper.accessor('age', {
header: () => 'Age',
footer: props => props.column.id,
}),
columnHelper.group({
header: 'More Info',
columns: [
columnHelper.accessor('visits', {
header: () => 'Visits',
footer: props => props.column.id,
}),
columnHelper.accessor('status', {
header: 'Status',
footer: props => props.column.id,
}),
columnHelper.accessor('progress', {
header: 'Profile Progress',
footer: props => props.column.id,
}),
],
}),
],
}),
])
const columnVisibility = ref({})
const columnOrder = ref<ColumnOrderState>([])
const columnPinning = ref<ColumnPinningState>({})
const isSplit = ref(false)
const rerender = () => (data.value = makeData(5000))
const table = useVueTable({
get data() {
return data.value
},
get columns() {
return columns.value
},
state: {
get columnVisibility() {
return columnVisibility.value
},
get columnOrder() {
return columnOrder.value
},
get columnPinning() {
return columnPinning.value
},
},
onColumnOrderChange: order => {
columnOrder.value =
order instanceof Function ? order(columnOrder.value) : order
},
onColumnPinningChange: pinning => {
columnPinning.value =
pinning instanceof Function ? pinning(columnPinning.value) : pinning
},
getCoreRowModel: getCoreRowModel(),
debugTable: true,
debugHeaders: true,
debugColumns: true,
})
const randomizeColumns = () => {
table.setColumnOrder(
faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
)
}
function toggleColumnVisibility(column: Column<any, any>) {
columnVisibility.value = {
...columnVisibility.value,
[column.id]: !column.getIsVisible(),
}
}
function toggleAllColumnsVisibility() {
table.getAllLeafColumns().forEach(column => {
toggleColumnVisibility(column)
})
}
</script>
<template>
<div class="p-2">
<div class="inline-block border border-black rounded shadow">
<div class="px-1 border-b border-black">
<label>
<input
type="checkbox"
:checked="table.getIsAllColumnsVisible()"
@input="toggleAllColumnsVisibility"
/>
Toggle All
</label>
</div>
<div
v-for="column in table.getAllLeafColumns()"
:key="column.id"
class="px-1"
>
<label>
<input
type="checkbox"
:checked="column.getIsVisible()"
@input="toggleColumnVisibility(column)"
/>
{{ column.id }}
</label>
</div>
</div>
<div class="h-4" />
<div class="flex flex-wrap gap-2">
<button @click="rerender" class="p-1 border">Regenerate</button>
<button @click="randomizeColumns" class="p-1 border">
Shuffle Columns
</button>
</div>
<div class="h-4" />
<div>
<label>
<input type="checkbox" v-model="isSplit" />
Split Mode
</label>
</div>
<div class="h-4" />
<div :class="`flex ${isSplit ? 'gap-4' : ''}`">
<!-- left -->
<table v-if="isSplit" class="border-2 border-black table-left">
<thead>
<tr
v-for="headerGroup in table.getLeftHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<div class="whitespace-nowrap">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</div>
<div
v-if="!header.isPlaceholder && header.column.getCanPin()"
class="flex justify-center gap-1"
>
<button
v-if="header.column.getIsPinned() !== 'left'"
@click="header.column.pin('left')"
class="px-2 border rounded"
>
{{ '<=' }}
</button>
<button
v-if="header.column.getIsPinned()"
@click="header.column.pin(false)"
class="px-2 border rounded"
>
X
</button>
<button
v-if="header.column.getIsPinned() !== 'right'"
@click="header.column.pin('right')"
class="px-2 border rounded"
>
{{ '=>' }}
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows.slice(0, 20)"
:key="row.id"
>
<td v-for="cell in row.getLeftVisibleCells()" :key="cell.id">
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
</table>
<!-- center -->
<table class="border-2 border-black table-center">
<thead>
<tr
v-for="headerGroup in isSplit
? table.getCenterHeaderGroups()
: table.getHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<div class="whitespace-nowrap">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</div>
<div
v-if="!header.isPlaceholder && header.column.getCanPin()"
class="flex justify-center gap-1"
>
<button
v-if="header.column.getIsPinned() !== 'left'"
@click="header.column.pin('left')"
class="px-2 border rounded"
>
{{ '<=' }}
</button>
<button
v-if="header.column.getIsPinned()"
@click="header.column.pin(false)"
class="px-2 border rounded"
>
X
</button>
<button
v-if="header.column.getIsPinned() !== 'right'"
@click="header.column.pin('right')"
class="px-2 border rounded"
>
{{ '=>' }}
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows.slice(0, 20)"
:key="row.id"
>
<td
v-for="cell in isSplit
? row.getCenterVisibleCells()
: row.getVisibleCells()"
:key="cell.id"
>
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
</table>
<!-- right -->
<table v-if="isSplit" class="border-2 border-black table-right">
<thead>
<tr
v-for="headerGroup in table.getRightHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<div class="whitespace-nowrap">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</div>
<div
v-if="!header.isPlaceholder && header.column.getCanPin()"
class="flex justify-center gap-1"
>
<button
v-if="header.column.getIsPinned() !== 'left'"
@click="header.column.pin('left')"
class="px-2 border rounded"
>
{{ '<=' }}
</button>
<button
v-if="header.column.getIsPinned()"
@click="header.column.pin(false)"
class="px-2 border rounded"
>
X
</button>
<button
v-if="header.column.getIsPinned() !== 'right'"
@click="header.column.pin('right')"
class="px-2 border rounded"
>
{{ '=>' }}
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows.slice(0, 20)"
:key="row.id"
>
<td v-for="cell in row.getRightVisibleCells()" :key="cell.id">
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
</table>
</div>
<pre>{{ JSON.stringify(table.getState().columnOrder, null, 2) }}</pre>
</div>
</template>
<style>
html,
body {
padding: 4px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
table {
border: 1px solid lightgray;
border-collapse: collapse;
}
tbody {
border-bottom: 1px solid lightgray;
}
th,
td {
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
padding: 2px 4px;
}
th {
padding: 8px;
}
tfoot {
color: gray;
}
tfoot th {
font-weight: normal;
}
</style>
<script setup lang="ts">
import {
createColumnHelper,
FlexRender,
getCoreRowModel,
useVueTable,
} from '@tanstack/vue-table'
import type {
Column,
ColumnOrderState,
ColumnPinningState,
} from '@tanstack/vue-table'
import { makeData, type Person } from './makeData'
import { ref } from 'vue'
import { faker } from '@faker-js/faker'
const data = ref(makeData(5000))
const columnHelper = createColumnHelper<Person>()
const columns = ref([
columnHelper.group({
// id: 'Name',
header: 'Name',
footer: props => props.column.id,
columns: [
columnHelper.accessor('firstName', {
cell: info => info.getValue(),
footer: props => props.column.id,
}),
columnHelper.accessor(row => row.lastName, {
id: 'lastName',
cell: info => info.getValue(),
header: () => 'Last Name',
footer: props => props.column.id,
}),
],
}),
columnHelper.group({
header: 'Info',
footer: props => props.column.id,
columns: [
columnHelper.accessor('age', {
header: () => 'Age',
footer: props => props.column.id,
}),
columnHelper.group({
header: 'More Info',
columns: [
columnHelper.accessor('visits', {
header: () => 'Visits',
footer: props => props.column.id,
}),
columnHelper.accessor('status', {
header: 'Status',
footer: props => props.column.id,
}),
columnHelper.accessor('progress', {
header: 'Profile Progress',
footer: props => props.column.id,
}),
],
}),
],
}),
])
const columnVisibility = ref({})
const columnOrder = ref<ColumnOrderState>([])
const columnPinning = ref<ColumnPinningState>({})
const isSplit = ref(false)
const rerender = () => (data.value = makeData(5000))
const table = useVueTable({
get data() {
return data.value
},
get columns() {
return columns.value
},
state: {
get columnVisibility() {
return columnVisibility.value
},
get columnOrder() {
return columnOrder.value
},
get columnPinning() {
return columnPinning.value
},
},
onColumnOrderChange: order => {
columnOrder.value =
order instanceof Function ? order(columnOrder.value) : order
},
onColumnPinningChange: pinning => {
columnPinning.value =
pinning instanceof Function ? pinning(columnPinning.value) : pinning
},
getCoreRowModel: getCoreRowModel(),
debugTable: true,
debugHeaders: true,
debugColumns: true,
})
const randomizeColumns = () => {
table.setColumnOrder(
faker.helpers.shuffle(table.getAllLeafColumns().map(d => d.id))
)
}
function toggleColumnVisibility(column: Column<any, any>) {
columnVisibility.value = {
...columnVisibility.value,
[column.id]: !column.getIsVisible(),
}
}
function toggleAllColumnsVisibility() {
table.getAllLeafColumns().forEach(column => {
toggleColumnVisibility(column)
})
}
</script>
<template>
<div class="p-2">
<div class="inline-block border border-black rounded shadow">
<div class="px-1 border-b border-black">
<label>
<input
type="checkbox"
:checked="table.getIsAllColumnsVisible()"
@input="toggleAllColumnsVisibility"
/>
Toggle All
</label>
</div>
<div
v-for="column in table.getAllLeafColumns()"
:key="column.id"
class="px-1"
>
<label>
<input
type="checkbox"
:checked="column.getIsVisible()"
@input="toggleColumnVisibility(column)"
/>
{{ column.id }}
</label>
</div>
</div>
<div class="h-4" />
<div class="flex flex-wrap gap-2">
<button @click="rerender" class="p-1 border">Regenerate</button>
<button @click="randomizeColumns" class="p-1 border">
Shuffle Columns
</button>
</div>
<div class="h-4" />
<div>
<label>
<input type="checkbox" v-model="isSplit" />
Split Mode
</label>
</div>
<div class="h-4" />
<div :class="`flex ${isSplit ? 'gap-4' : ''}`">
<!-- left -->
<table v-if="isSplit" class="border-2 border-black table-left">
<thead>
<tr
v-for="headerGroup in table.getLeftHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<div class="whitespace-nowrap">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</div>
<div
v-if="!header.isPlaceholder && header.column.getCanPin()"
class="flex justify-center gap-1"
>
<button
v-if="header.column.getIsPinned() !== 'left'"
@click="header.column.pin('left')"
class="px-2 border rounded"
>
{{ '<=' }}
</button>
<button
v-if="header.column.getIsPinned()"
@click="header.column.pin(false)"
class="px-2 border rounded"
>
X
</button>
<button
v-if="header.column.getIsPinned() !== 'right'"
@click="header.column.pin('right')"
class="px-2 border rounded"
>
{{ '=>' }}
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows.slice(0, 20)"
:key="row.id"
>
<td v-for="cell in row.getLeftVisibleCells()" :key="cell.id">
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
</table>
<!-- center -->
<table class="border-2 border-black table-center">
<thead>
<tr
v-for="headerGroup in isSplit
? table.getCenterHeaderGroups()
: table.getHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<div class="whitespace-nowrap">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</div>
<div
v-if="!header.isPlaceholder && header.column.getCanPin()"
class="flex justify-center gap-1"
>
<button
v-if="header.column.getIsPinned() !== 'left'"
@click="header.column.pin('left')"
class="px-2 border rounded"
>
{{ '<=' }}
</button>
<button
v-if="header.column.getIsPinned()"
@click="header.column.pin(false)"
class="px-2 border rounded"
>
X
</button>
<button
v-if="header.column.getIsPinned() !== 'right'"
@click="header.column.pin('right')"
class="px-2 border rounded"
>
{{ '=>' }}
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows.slice(0, 20)"
:key="row.id"
>
<td
v-for="cell in isSplit
? row.getCenterVisibleCells()
: row.getVisibleCells()"
:key="cell.id"
>
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
</table>
<!-- right -->
<table v-if="isSplit" class="border-2 border-black table-right">
<thead>
<tr
v-for="headerGroup in table.getRightHeaderGroups()"
:key="headerGroup.id"
>
<th
v-for="header in headerGroup.headers"
:key="header.id"
:colSpan="header.colSpan"
>
<div class="whitespace-nowrap">
<FlexRender
v-if="!header.isPlaceholder"
:render="header.column.columnDef.header"
:props="header.getContext()"
/>
</div>
<div
v-if="!header.isPlaceholder && header.column.getCanPin()"
class="flex justify-center gap-1"
>
<button
v-if="header.column.getIsPinned() !== 'left'"
@click="header.column.pin('left')"
class="px-2 border rounded"
>
{{ '<=' }}
</button>
<button
v-if="header.column.getIsPinned()"
@click="header.column.pin(false)"
class="px-2 border rounded"
>
X
</button>
<button
v-if="header.column.getIsPinned() !== 'right'"
@click="header.column.pin('right')"
class="px-2 border rounded"
>
{{ '=>' }}
</button>
</div>
</th>
</tr>
</thead>
<tbody>
<tr
v-for="row in table.getRowModel().rows.slice(0, 20)"
:key="row.id"
>
<td v-for="cell in row.getRightVisibleCells()" :key="cell.id">
<FlexRender
:render="cell.column.columnDef.cell"
:props="cell.getContext()"
/>
</td>
</tr>
</tbody>
</table>
</div>
<pre>{{ JSON.stringify(table.getState().columnOrder, null, 2) }}</pre>
</div>
</template>
<style>
html,
body {
padding: 4px;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
table {
border: 1px solid lightgray;
border-collapse: collapse;
}
tbody {
border-bottom: 1px solid lightgray;
}
th,
td {
border-bottom: 1px solid lightgray;
border-right: 1px solid lightgray;
padding: 2px 4px;
}
th {
padding: 8px;
}
tfoot {
color: gray;
}
tfoot th {
font-weight: normal;
}
</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.