Svelte Example: Column Pinning
svelte
<script lang="ts">
import { writable } from 'svelte/store'
import {
createSvelteTable,
getCoreRowModel,
getSortedRowModel,
flexRender,
} from '@tanstack/svelte-table'
import type {
ColumnDef,
ColumnOrderState,
ColumnPinningState,
OnChangeFn,
TableOptions,
VisibilityState,
} from '@tanstack/svelte-table'
import { makeData, type Person } from './makeData'
import { faker } from '@faker-js/faker'
import './index.css'
const columns: ColumnDef<Person>[] = [
{
header: 'Name',
footer: props => props.column.id,
columns: [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
footer: props => props.column.id,
},
{
accessorFn: row => row.lastName,
id: 'lastName',
cell: info => info.getValue(),
header: () => 'Last Name',
footer: props => props.column.id,
},
],
},
{
header: 'Info',
footer: props => props.column.id,
columns: [
{
accessorKey: 'age',
header: () => 'Age',
footer: props => props.column.id,
},
{
header: 'More Info',
columns: [
{
accessorKey: 'visits',
header: () => 'Visits',
footer: props => props.column.id,
},
{
accessorKey: 'status',
header: 'Status',
footer: props => props.column.id,
},
{
accessorKey: 'progress',
header: 'Profile Progress',
footer: props => props.column.id,
},
],
},
],
},
]
const data = makeData(5000)
let isSplit = false
let columnOrder: ColumnOrderState = []
let columnPinning: ColumnPinningState = {}
let columnVisibility: VisibilityState = {}
const setColumnOrder: OnChangeFn<ColumnOrderState> = updater => {
if (updater instanceof Function) {
columnOrder = updater(columnOrder)
} else {
columnOrder = updater
}
options.update(old => ({
...old,
state: {
...old.state,
columnOrder,
},
}))
}
const setColumnPinning: OnChangeFn<ColumnPinningState> = updater => {
if (updater instanceof Function) {
columnPinning = updater(columnPinning)
} else {
columnPinning = updater
}
options.update(old => ({
...old,
state: {
...old.state,
columnPinning,
},
}))
}
const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
if (updater instanceof Function) {
columnVisibility = updater(columnVisibility)
} else {
columnVisibility = updater
}
options.update(old => ({
...old,
state: {
...old.state,
columnVisibility,
},
}))
}
const options = writable<TableOptions<Person>>({
data,
columns,
state: {
columnOrder,
columnPinning,
columnVisibility,
},
onColumnOrderChange: setColumnOrder,
onColumnPinningChange: setColumnPinning,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
const randomizeColumns = () => {
$table.setColumnOrder(_updater =>
faker.helpers.shuffle($table.getAllLeafColumns().map(d => d.id))
)
}
const regenerate = () => {
options.update(options => ({
...options,
data: makeData(5000),
}))
}
const table = createSvelteTable(options)
</script>
<div class="p-2">
<div class="inline-block border border-black shadow rounded">
<div class="px-1 border-b border-black">
<label>
<input
checked={$table.getIsAllColumnsVisible()}
on:change={e => {
console.info($table.getToggleAllColumnsVisibilityHandler()(e))
}}
type="checkbox"
/>{' '}
Toggle All
</label>
</div>
{#each $table.getAllLeafColumns() as column}
<div class="px-1">
<label>
<input
checked={column.getIsVisible()}
on:change={column.getToggleVisibilityHandler()}
type="checkbox"
/>{' '}
{column.id}
</label>
</div>
{/each}
</div>
<div class="h-4" />
<div class="flex flex-wrap gap-2">
<button on:click={() => regenerate()} class="border p-1">
Regenerate
</button>
<button on:click={() => randomizeColumns()} class="border p-1">
Shuffle Columns
</button>
</div>
<div class="h-4" />
<div>
<label>
<input
type="checkbox"
checked={isSplit}
on:change={e => (isSplit = e.currentTarget.checked)}
/>{' '}
Split Mode
</label>
</div>
<div class={`flex ${isSplit ? 'gap-4' : ''}`}>
{#if isSplit}
<table class="border-2 border-black">
<thead>
{#each $table.getLeftHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getCoreRowModel().rows.slice(0, 20) as row}
<tr>
{#each row.getLeftVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
{/if}
<table class="border-2 border-black">
<thead>
{#each isSplit ? $table.getCenterHeaderGroups() : $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getCoreRowModel().rows.slice(0, 20) as row}
<tr>
{#each isSplit ? row.getCenterVisibleCells() : row.getVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
{#if isSplit}
<table class="border-2 border-black">
<thead>
{#each $table.getRightHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows.slice(0, 20) as row}
<tr>
{#each row.getRightVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
<pre>{JSON.stringify($table.getState().columnPinning, null, 2)}</pre>
</div>
<script lang="ts">
import { writable } from 'svelte/store'
import {
createSvelteTable,
getCoreRowModel,
getSortedRowModel,
flexRender,
} from '@tanstack/svelte-table'
import type {
ColumnDef,
ColumnOrderState,
ColumnPinningState,
OnChangeFn,
TableOptions,
VisibilityState,
} from '@tanstack/svelte-table'
import { makeData, type Person } from './makeData'
import { faker } from '@faker-js/faker'
import './index.css'
const columns: ColumnDef<Person>[] = [
{
header: 'Name',
footer: props => props.column.id,
columns: [
{
accessorKey: 'firstName',
cell: info => info.getValue(),
footer: props => props.column.id,
},
{
accessorFn: row => row.lastName,
id: 'lastName',
cell: info => info.getValue(),
header: () => 'Last Name',
footer: props => props.column.id,
},
],
},
{
header: 'Info',
footer: props => props.column.id,
columns: [
{
accessorKey: 'age',
header: () => 'Age',
footer: props => props.column.id,
},
{
header: 'More Info',
columns: [
{
accessorKey: 'visits',
header: () => 'Visits',
footer: props => props.column.id,
},
{
accessorKey: 'status',
header: 'Status',
footer: props => props.column.id,
},
{
accessorKey: 'progress',
header: 'Profile Progress',
footer: props => props.column.id,
},
],
},
],
},
]
const data = makeData(5000)
let isSplit = false
let columnOrder: ColumnOrderState = []
let columnPinning: ColumnPinningState = {}
let columnVisibility: VisibilityState = {}
const setColumnOrder: OnChangeFn<ColumnOrderState> = updater => {
if (updater instanceof Function) {
columnOrder = updater(columnOrder)
} else {
columnOrder = updater
}
options.update(old => ({
...old,
state: {
...old.state,
columnOrder,
},
}))
}
const setColumnPinning: OnChangeFn<ColumnPinningState> = updater => {
if (updater instanceof Function) {
columnPinning = updater(columnPinning)
} else {
columnPinning = updater
}
options.update(old => ({
...old,
state: {
...old.state,
columnPinning,
},
}))
}
const setColumnVisibility: OnChangeFn<VisibilityState> = updater => {
if (updater instanceof Function) {
columnVisibility = updater(columnVisibility)
} else {
columnVisibility = updater
}
options.update(old => ({
...old,
state: {
...old.state,
columnVisibility,
},
}))
}
const options = writable<TableOptions<Person>>({
data,
columns,
state: {
columnOrder,
columnPinning,
columnVisibility,
},
onColumnOrderChange: setColumnOrder,
onColumnPinningChange: setColumnPinning,
onColumnVisibilityChange: setColumnVisibility,
getCoreRowModel: getCoreRowModel(),
getSortedRowModel: getSortedRowModel(),
debugTable: true,
})
const randomizeColumns = () => {
$table.setColumnOrder(_updater =>
faker.helpers.shuffle($table.getAllLeafColumns().map(d => d.id))
)
}
const regenerate = () => {
options.update(options => ({
...options,
data: makeData(5000),
}))
}
const table = createSvelteTable(options)
</script>
<div class="p-2">
<div class="inline-block border border-black shadow rounded">
<div class="px-1 border-b border-black">
<label>
<input
checked={$table.getIsAllColumnsVisible()}
on:change={e => {
console.info($table.getToggleAllColumnsVisibilityHandler()(e))
}}
type="checkbox"
/>{' '}
Toggle All
</label>
</div>
{#each $table.getAllLeafColumns() as column}
<div class="px-1">
<label>
<input
checked={column.getIsVisible()}
on:change={column.getToggleVisibilityHandler()}
type="checkbox"
/>{' '}
{column.id}
</label>
</div>
{/each}
</div>
<div class="h-4" />
<div class="flex flex-wrap gap-2">
<button on:click={() => regenerate()} class="border p-1">
Regenerate
</button>
<button on:click={() => randomizeColumns()} class="border p-1">
Shuffle Columns
</button>
</div>
<div class="h-4" />
<div>
<label>
<input
type="checkbox"
checked={isSplit}
on:change={e => (isSplit = e.currentTarget.checked)}
/>{' '}
Split Mode
</label>
</div>
<div class={`flex ${isSplit ? 'gap-4' : ''}`}>
{#if isSplit}
<table class="border-2 border-black">
<thead>
{#each $table.getLeftHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getCoreRowModel().rows.slice(0, 20) as row}
<tr>
{#each row.getLeftVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
{/if}
<table class="border-2 border-black">
<thead>
{#each isSplit ? $table.getCenterHeaderGroups() : $table.getHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getCoreRowModel().rows.slice(0, 20) as row}
<tr>
{#each isSplit ? row.getCenterVisibleCells() : row.getVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
{#if isSplit}
<table class="border-2 border-black">
<thead>
{#each $table.getRightHeaderGroups() as headerGroup}
<tr>
{#each headerGroup.headers as header}
<th colSpan={header.colSpan}>
<div class="whitespace-nowrap">
{#if !header.isPlaceholder}
<svelte:component
this={flexRender(
header.column.columnDef.header,
header.getContext()
)}
/>
{/if}
</div>
{#if !header.isPlaceholder && header.column.getCanPin()}
<div class="flex gap-1 justify-center">
{#if header.column.getIsPinned() !== 'left'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('left')
}}
>
{'<='}
</button>
{/if}
{#if header.column.getIsPinned()}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin(false)
}}
>
X
</button>
{/if}
{#if header.column.getIsPinned() !== 'right'}
<button
class="border rounded px-2"
on:click={() => {
header.column.pin('right')
}}
>
{'=>'}
</button>
{/if}
</div>
{/if}
</th>
{/each}
</tr>
{/each}
</thead>
<tbody>
{#each $table.getRowModel().rows.slice(0, 20) as row}
<tr>
{#each row.getRightVisibleCells() as cell}
<td>
<svelte:component
this={flexRender(
cell.column.columnDef.cell,
cell.getContext()
)}
/>
</td>
{/each}
</tr>
{/each}
</tbody>
</table>
{/if}
</div>
<pre>{JSON.stringify($table.getState().columnPinning, null, 2)}</pre>
</div>
Our Partners
'%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.
Subscribe to Bytes
Your weekly dose of JavaScript news. Delivered every Monday to over 100,000 devs, for free.