+ {{ columnSizingDebugInfo() }}
+
+
+
+ ({{ data().length }} rows)
+
+ |
+ |
+ }
+ }
+
|---|
|
+ |
+ }
+
|
+ |
+ }
+
|
+ @if (!header.isPlaceholder) {
+ |
+ }
+
|---|
|
+ |
+ }
+
{{ rawExpandedState() }}
+
+ {{ rawRowSelectionState() }}
+|
+ |
+ }
+ }
+
|---|
|
+ |
+ }
+
{{ sortedIds() | json }}
+|
+ @if (!header.isPlaceholder) {
+ |
+ }
+
|---|
|
+ |
+ }
+
|
+ |
+
+
+ {{ row.original | json }}
+
+
+|
+ ${header.isPlaceholder
+ ? null
+ : html`
+ ${flexRender(
+ header.column.columnDef.header,
+ header.getContext(),
+ )}
+ ${{ asc: ' 🔼', desc: ' 🔽' }[
+ header.column.getIsSorted() as string
+ ] ?? null}
+ `}
+ |
+ `,
+ )}
+
|---|
| + ${flexRender( + cell.column.columnDef.cell, + cell.getContext(), + )} + | + `, + )} +
${JSON.stringify(this._sorting, null, 2)}
+
+ `
+ }
+}
diff --git a/examples/lit/sorting-dynamic-data/src/makeData.ts b/examples/lit/sorting-dynamic-data/src/makeData.ts
new file mode 100644
index 0000000000..d6c0639b22
--- /dev/null
+++ b/examples/lit/sorting-dynamic-data/src/makeData.ts
@@ -0,0 +1,52 @@
+import { faker } from '@faker-js/faker'
+
+export type Person = {
+ firstName: string
+ lastName: string | undefined
+ age: number
+ visits: number | undefined
+ progress: number
+ status: 'relationship' | 'complicated' | 'single'
+ rank: number
+ createdAt: Date
+ subRows?: Person[]
+}
+
+const range = (len: number) => {
+ const arr: number[] = []
+ for (let i = 0; i < len; i++) {
+ arr.push(i)
+ }
+ return arr
+}
+
+const newPerson = (): Person => {
+ return {
+ firstName: faker.person.firstName(),
+ lastName: Math.random() < 0.1 ? undefined : faker.person.lastName(),
+ age: faker.number.int(40),
+ visits: Math.random() < 0.1 ? undefined : faker.number.int(1000),
+ progress: faker.number.int(100),
+ createdAt: faker.date.anytime(),
+ status: faker.helpers.shuffle+ Notice: You are currently running React in + development mode. Virtualized rendering performance will be slightly + degraded until this application is built for production. +
+ ) : null} +