From 5048fe0f7d99ab14ac6f467b5e4479d712963127 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 11 Jun 2025 14:41:30 -0400
Subject: [PATCH 1/9] wip

---
 .../js/components/ui/Listing/BulkActions.vue  |   5 +
 .../js/components/ui/Listing/ColumnPicker.vue |   5 +
 .../js/components/ui/Listing/Filters.vue      |   3 +
 .../js/components/ui/Listing/HeaderCell.vue   |  30 ++
 .../js/components/ui/Listing/Listing.vue      | 275 ++++++++++++++++++
 .../js/components/ui/Listing/Pagination.vue   |  16 +
 .../js/components/ui/Listing/Presets.vue      |   5 +
 resources/js/components/ui/Listing/Search.vue |   5 +
 resources/js/components/ui/Listing/Table.vue  | 179 ++++++++++++
 .../js/components/ui/Listing/ToggleAll.vue    |  35 +++
 resources/js/components/ui/Pagination.vue     | 197 +++++++++++++
 resources/js/components/ui/index.js           |   2 +
 12 files changed, 757 insertions(+)
 create mode 100644 resources/js/components/ui/Listing/BulkActions.vue
 create mode 100644 resources/js/components/ui/Listing/ColumnPicker.vue
 create mode 100644 resources/js/components/ui/Listing/Filters.vue
 create mode 100644 resources/js/components/ui/Listing/HeaderCell.vue
 create mode 100644 resources/js/components/ui/Listing/Listing.vue
 create mode 100644 resources/js/components/ui/Listing/Pagination.vue
 create mode 100644 resources/js/components/ui/Listing/Presets.vue
 create mode 100644 resources/js/components/ui/Listing/Search.vue
 create mode 100644 resources/js/components/ui/Listing/Table.vue
 create mode 100644 resources/js/components/ui/Listing/ToggleAll.vue
 create mode 100644 resources/js/components/ui/Pagination.vue

diff --git a/resources/js/components/ui/Listing/BulkActions.vue b/resources/js/components/ui/Listing/BulkActions.vue
new file mode 100644
index 0000000000..b6b549b3cc
--- /dev/null
+++ b/resources/js/components/ui/Listing/BulkActions.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+    <div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Bulk Actions</div>
+</template>
diff --git a/resources/js/components/ui/Listing/ColumnPicker.vue b/resources/js/components/ui/Listing/ColumnPicker.vue
new file mode 100644
index 0000000000..3168de7e1d
--- /dev/null
+++ b/resources/js/components/ui/Listing/ColumnPicker.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+    <div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Columns</div>
+</template>
diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
new file mode 100644
index 0000000000..5958daf7cc
--- /dev/null
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -0,0 +1,3 @@
+<script setup></script>
+
+<template><div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Filters</div></template>
diff --git a/resources/js/components/ui/Listing/HeaderCell.vue b/resources/js/components/ui/Listing/HeaderCell.vue
new file mode 100644
index 0000000000..6621ac77b2
--- /dev/null
+++ b/resources/js/components/ui/Listing/HeaderCell.vue
@@ -0,0 +1,30 @@
+<script setup>
+import { Button } from '@statamic/ui';
+import { injectListingContext } from '@statamic/components/ui/Listing/Listing.vue';
+import { computed } from 'vue';
+
+const props = defineProps({
+    column: {
+        type: Object,
+        required: true,
+    },
+});
+
+const { sortColumn, setSortColumn } = injectListingContext();
+const isCurrentSortColumn = computed(() => props.column.field === sortColumn.value);
+</script>
+
+<template>
+    <th>
+        <span v-if="!column.sortable" v-text="__(column.label)" />
+        <Button
+            v-else
+            :text="__(column.label)"
+            :icon-append="isCurrentSortColumn ? 'up-down' : null"
+            size="sm"
+            variant="ghost"
+            class="-mt-2 -mb-1 -ml-3 text-sm! font-medium! text-gray-800! dark:text-gray-400!"
+            @click.prevent="setSortColumn(column.field)"
+        />
+    </th>
+</template>
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
new file mode 100644
index 0000000000..c18710790a
--- /dev/null
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -0,0 +1,275 @@
+<script>
+import createContext from '@statamic/util/createContext.js';
+
+export const [injectListingContext, provideListingContext] = createContext('Listing');
+</script>
+
+<script setup>
+import { ref, toRef, computed, watch, nextTick, onMounted, onBeforeUnmount } from 'vue';
+import { Icon } from '@statamic/ui';
+import axios from 'axios';
+import BulkActions from './BulkActions.vue';
+import uniqid from 'uniqid';
+
+const emit = defineEmits(['update:columns', 'update:sortColumn', 'update:sortDirection', 'update:selections']);
+
+const props = defineProps({
+    url: {
+        type: String,
+        required: true,
+    },
+    allowBulkActions: {
+        type: Boolean,
+        default: true,
+    },
+    reorderable: {
+        type: Boolean,
+        default: false,
+    },
+    preferencesPrefix: {
+        type: String,
+    },
+    columns: {
+        type: Array,
+        default: () => [],
+    },
+    sortColumn: {
+        type: String,
+        default: '',
+    },
+    sortDirection: {
+        type: String,
+        default: 'asc',
+    },
+    sortable: {
+        type: Boolean,
+        default: true,
+    },
+    selections: {
+        type: Array,
+        default: () => [],
+    },
+    maxSelections: {
+        type: Number,
+        default: Infinity,
+    },
+    pushQuery: {
+        type: Boolean,
+        default: true,
+    },
+    additionalParameters: {
+        type: Object,
+        default: () => ({}),
+    },
+});
+
+const id = uniqid();
+const items = ref([]);
+const meta = ref({});
+const activeFilterBadges = ref([]);
+const currentPage = ref(1);
+const perPage = ref(10);
+const initializing = ref(true);
+const loading = ref(true);
+let popping = false;
+let source = null;
+
+const rawParameters = computed(() => ({
+    page: currentPage.value,
+    perPage: perPage.value,
+    sort: props.sortColumn,
+    order: props.sortDirection,
+}));
+
+function setParameters(params) {
+    currentPage.value = parseInt(params.page);
+    perPage.value = parseInt(params.perPage);
+    emit('update:sortColumn', params.sort);
+    emit('update:sortDirection', params.order);
+}
+
+const parameters = computed(() => {
+    const params = Object.fromEntries(
+        Object.entries(rawParameters.value).filter(([key, value]) => {
+            return value !== null && value !== undefined && value !== '';
+        }),
+    );
+
+    return { ...params, ...props.additionalParameters };
+});
+
+const shouldRequestFirstPage = computed(() => {
+    if (currentPage.value > 1 && items.value.length === 0) {
+        currentPage.value = 1;
+        return true;
+    }
+
+    return false;
+});
+
+function request() {
+    loading.value = true;
+
+    if (source) source.abort();
+    source = new AbortController();
+
+    axios
+        .get(props.url, {
+            params: parameters.value,
+            signal: source.signal,
+        })
+        .then((response) => {
+            emit('update:columns', response.data.meta.columns);
+            activeFilterBadges.value = { ...response.data.meta.activeFilterBadges };
+            items.value = Object.values(response.data.data);
+            meta.value = response.data.meta;
+            if (shouldRequestFirstPage.value) return request();
+            initializing.value = false;
+            loading.value = false;
+        })
+        .catch((e) => {
+            if (axios.isCancel(e)) return;
+            initializing.value = false;
+            loading.value = false;
+            if (e.request && !e.response) return;
+            Statamic.$toast.error(e.response ? e.response.data.message : __('Something went wrong'), {
+                duration: null,
+            });
+        });
+}
+
+function pushState() {
+    if (!props.pushQuery || popping) return;
+
+    // This ensures no additionalParameters are added to the URL
+    const keys = Object.keys(rawParameters.value);
+    const searchParams = new URLSearchParams(
+        Object.fromEntries(
+            keys.filter((key) => parameters.value.hasOwnProperty(key)).map((key) => [key, parameters.value[key]]),
+        ),
+    );
+
+    window.history.pushState({ parameters: parameters.value }, '', '?' + searchParams.toString());
+}
+
+function popState(event) {
+    if (!props.pushQuery || !event.state) return;
+
+    popping = true;
+    setParameters(event.state.parameters);
+    nextTick(() => (popping = false));
+}
+
+function autoApplyState() {
+    if (!props.pushQuery || !window.location.search) return;
+
+    const searchParams = new URLSearchParams(window.location.search);
+    const parameters = Object.fromEntries(searchParams.entries());
+    popping = true;
+    setParameters(parameters);
+    nextTick(() => (popping = false));
+}
+
+const selections = computed({
+    get: () => props.selections,
+    set: (selections) => emit('update:selections', selections),
+});
+
+const visibleColumns = computed(() => {
+    const visibleColumns = props.columns.filter((column) => column.visible);
+    return visibleColumns.length ? visibleColumns : props.columns;
+});
+
+const sortableColumns = computed(() => {
+    return props.columns.filter((column) => column.sortable).map((column) => column.field);
+});
+
+function isColumnVisible(column) {
+    return visibleColumns.value.find((c) => c.field === column);
+}
+
+function setSortColumn(column) {
+    if (!props.sortable) return;
+
+    if (!sortableColumns.value.includes(column)) return;
+
+    // If sorting by the same column, toggle the direction.
+    // Otherwise, set the default direction.
+    if (props.sortColumn === column) {
+        toggleSortDirection();
+    } else {
+        emit('update:sortDirection', getDefaultSortDirectionForColumn(column));
+    }
+
+    emit('update:sortColumn', column);
+}
+
+function getColumnFieldtype(column) {
+    return props.columns.find((c) => c.field === column)?.fieldtype;
+}
+
+function getDefaultSortDirectionForColumn(column) {
+    return getColumnFieldtype(column) === 'date' ? 'desc' : 'asc';
+}
+
+function toggleSortDirection() {
+    emit('update:sortDirection', props.sortDirection === 'asc' ? 'desc' : 'asc');
+}
+
+function setCurrentPage(page) {
+    currentPage.value = page;
+}
+
+function setPerPage(value) {
+    perPage.value = value;
+}
+
+provideListingContext({
+    loading,
+    items,
+    meta,
+    columns: toRef(() => props.columns),
+    visibleColumns,
+    sortColumn: toRef(() => props.sortColumn),
+    setSortColumn,
+    selections,
+    maxSelections: toRef(() => props.maxSelections),
+    allowBulkActions: toRef(() => props.allowBulkActions),
+    perPage,
+    setPerPage,
+    setCurrentPage,
+});
+
+const slotProps = computed(() => ({
+    isColumnVisible,
+}));
+
+watch(parameters, () => {
+    request();
+    pushState();
+});
+
+watch(loading, (loading) => Statamic.$progress.loading(id, loading));
+
+onMounted(() => {
+    if (props.pushQuery) {
+        window.history.replaceState({ parameters: parameters.value }, '');
+        window.addEventListener('popstate', popState);
+    }
+});
+
+onBeforeUnmount(() => {
+    if (props.pushQuery) window.removeEventListener('popstate', popState);
+});
+
+request();
+autoApplyState();
+</script>
+
+<template>
+    <slot name="initializing" v-if="initializing">
+        <Icon name="loading" />
+    </slot>
+    <slot v-if="!initializing" v-bind="slotProps" />
+    <BulkActions />
+</template>
diff --git a/resources/js/components/ui/Listing/Pagination.vue b/resources/js/components/ui/Listing/Pagination.vue
new file mode 100644
index 0000000000..fe80b60a3f
--- /dev/null
+++ b/resources/js/components/ui/Listing/Pagination.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { Pagination } from '@statamic/ui';
+import { injectListingContext } from '@statamic/components/ui/Listing/Listing.vue';
+
+const { meta, perPage, setPerPage, setCurrentPage } = injectListingContext();
+</script>
+
+<template>
+    <Pagination
+        :per-page="perPage"
+        :resource-meta="meta"
+        show-totals
+        @page-selected="setCurrentPage"
+        @per-page-changed="setPerPage"
+    />
+</template>
diff --git a/resources/js/components/ui/Listing/Presets.vue b/resources/js/components/ui/Listing/Presets.vue
new file mode 100644
index 0000000000..c61e878e13
--- /dev/null
+++ b/resources/js/components/ui/Listing/Presets.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+    <div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Presets</div>
+</template>
diff --git a/resources/js/components/ui/Listing/Search.vue b/resources/js/components/ui/Listing/Search.vue
new file mode 100644
index 0000000000..10f021a01e
--- /dev/null
+++ b/resources/js/components/ui/Listing/Search.vue
@@ -0,0 +1,5 @@
+<script setup></script>
+
+<template>
+    <div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Search</div>
+</template>
diff --git a/resources/js/components/ui/Listing/Table.vue b/resources/js/components/ui/Listing/Table.vue
new file mode 100644
index 0000000000..7bcba933a7
--- /dev/null
+++ b/resources/js/components/ui/Listing/Table.vue
@@ -0,0 +1,179 @@
+<script setup>
+import { Button, Panel, PanelFooter } from '@statamic/ui';
+import { ref, computed, useTemplateRef } from 'vue';
+import { injectListingContext } from '@statamic/components/ui/Listing/Listing.vue';
+import TableField from '@statamic/components/data-list/TableField.vue';
+import ToggleAll from './ToggleAll.vue';
+import Pagination from './Pagination.vue';
+import HeaderCell from './HeaderCell.vue';
+
+const props = defineProps({
+    unstyled: {
+        type: Boolean,
+        default: false,
+    },
+    contained: {
+        type: Boolean,
+        default: false,
+    },
+    reorderable: {
+        type: Boolean,
+        default: false,
+    },
+});
+
+const { visibleColumns, selections, items, allowBulkActions, maxSelections, sortColumn, setSortColumn, loading } =
+    injectListingContext();
+const tableRef = useTemplateRef('table');
+const shifting = ref(false);
+let lastItemClicked = null;
+const hasSelections = computed(() => selections.value.length > 0);
+const reachedSelectionLimit = computed(() => selections.value.length === maxSelections);
+const singleSelect = computed(() => maxSelections === 1);
+
+const relativeColumnsSize = computed(() => {
+    if (visibleColumns.value.length <= 4) return 'sm';
+    if (visibleColumns.value.length <= 8) return 'md';
+    if (visibleColumns.value.length >= 12) return 'lx';
+    return 'xl';
+});
+
+function actualIndex(row) {
+    return items.value.findIndex((item) => item.id === row.id);
+}
+
+function isSelected(id) {
+    return selections.value.includes(id);
+}
+
+function checkboxClicked(row, index, event) {
+    if (event.shiftKey && lastItemClicked !== null) {
+        tableRef.value.focus();
+        selectRange(Math.min(lastItemClicked, index), Math.max(lastItemClicked, index));
+    } else {
+        toggleSelection(row.id, index);
+    }
+
+    if (event.target.checked) {
+        lastItemClicked = index;
+    }
+}
+
+function toggleSelection(id) {
+    const i = selections.value.indexOf(id);
+
+    if (i > -1) {
+        selections.value.splice(i, 1);
+        return;
+    }
+
+    if (singleSelect.value) selections.value.pop();
+
+    if (!reachedSelectionLimit.value) selections.value.push(id);
+}
+
+function selectRange(from, to) {
+    for (let i = from; i <= to; i++) {
+        let row = items.value[i].id;
+        if (!selections.value.includes(row) && !reachedSelectionLimit.value) {
+            selections.value.push(row);
+        }
+    }
+}
+</script>
+
+<template>
+    <Panel class="relative overflow-x-auto overscroll-x-contain">
+        <table
+            :data-size="relativeColumnsSize"
+            :class="{
+                'select-none': shifting,
+                'data-table': !unstyled,
+                contained: contained,
+                'opacity-50': loading,
+            }"
+            data-table
+            ref="table"
+            tabindex="0"
+            :data-has-selections="hasSelections ? true : null"
+            @keydown.shift="shifting = true"
+            @keyup="shifting = false"
+        >
+            <thead v-if="allowBulkActions || visibleColumns.length > 1">
+                <tr>
+                    <th
+                        v-if="allowBulkActions || reorderable"
+                        :class="{ 'checkbox-column': !reorderable, 'handle-column': reorderable }"
+                    >
+                        <ToggleAll v-if="allowBulkActions && !singleSelect" />
+                    </th>
+                    <HeaderCell v-for="column in visibleColumns" :key="column.field" :column />
+                    <!--                    <th class="type-column" v-if="type">-->
+                    <!--                        <template v-if="type === 'entries'">{{ __('Collection') }}</template>-->
+                    <!--                        <template v-if="type === 'terms'">{{ __('Taxonomy') }}</template>-->
+                    <!--                    </th>-->
+                    <th class="actions-column" />
+                </tr>
+            </thead>
+            <tbody>
+                <slot name="tbody-start" />
+                <tr
+                    v-for="(row, index) in items"
+                    :key="row.id"
+                    class="sortable-row outline-hidden"
+                    :data-row="isSelected(row.id) ? 'selected' : 'unselected'"
+                >
+                    <td class="table-drag-handle" v-if="reorderable"></td>
+                    <td class="checkbox-column" v-if="allowBulkActions && !reorderable">
+                        <input
+                            v-if="!reorderable"
+                            type="checkbox"
+                            :value="row.id"
+                            :checked="isSelected(row.id)"
+                            :disabled="reachedSelectionLimit && !singleSelect && !isSelected(row.id)"
+                            :id="`checkbox-${row.id}`"
+                            @click="checkboxClicked(row, index, $event)"
+                        />
+                    </td>
+                    <td
+                        v-for="column in visibleColumns"
+                        :key="column.field"
+                        :width="column.width"
+                        :data-column="`${column.field}`"
+                    >
+                        <slot
+                            :name="`cell-${column.field}`"
+                            :value="row[column.value || column.field]"
+                            :values="row"
+                            :row="row"
+                            :index="actualIndex(row)"
+                            :display-index="index"
+                            :checkbox-id="`checkbox-${row.id}`"
+                        >
+                            <table-field
+                                :handle="column.field"
+                                :value="row[column.value || column.field]"
+                                :values="row"
+                                :fieldtype="column.fieldtype"
+                                :key="column.field"
+                            />
+                        </slot>
+                    </td>
+                    <!--                    <td class="type-column" v-if="type">-->
+                    <!--                        <Badge-->
+                    <!--                            size="sm"-->
+                    <!--                            v-if="type === 'entries' || type === 'terms'"-->
+                    <!--                            :label="type === 'entries' ? __(row.collection.title) : __(row.taxonomy.title)"-->
+                    <!--                        />-->
+                    <!--                    </td>-->
+                    <td class="actions-column">
+                        <slot name="actions" :row="row" :index="actualIndex(row)" :display-index="index"></slot>
+                    </td>
+                </tr>
+            </tbody>
+        </table>
+        <PanelFooter>
+            <Pagination />
+        </PanelFooter>
+    </Panel>
+</template>
diff --git a/resources/js/components/ui/Listing/ToggleAll.vue b/resources/js/components/ui/Listing/ToggleAll.vue
new file mode 100644
index 0000000000..f5d9a12a18
--- /dev/null
+++ b/resources/js/components/ui/Listing/ToggleAll.vue
@@ -0,0 +1,35 @@
+<script setup>
+import { computed } from 'vue';
+import { injectListingContext } from '@statamic/components/ui/Listing/Listing.vue';
+
+const { items, selections, maxSelections } = injectListingContext();
+const anyItemsChecked = computed(() => selections.value.length > 0);
+const indeterminate = computed(() => anyItemsChecked.value && selections.value.length < items.value.length);
+
+function toggle() {
+    anyItemsChecked.value ? uncheckAllItems() : checkMaximumAmountOfItems();
+}
+
+function checkMaximumAmountOfItems() {
+    let newSelections = items.value.map((row) => row.id);
+    if (maxSelections) newSelections = newSelections.slice(0, maxSelections);
+    selections.value.splice(0, selections.value.length, ...newSelections);
+}
+
+function uncheckAllItems() {
+    selections.value.splice(0, selections.value.length);
+}
+</script>
+
+<template>
+    <label for="checkerOfAllBoxes" class="relative flex cursor-pointer items-center justify-center">
+        <input
+            type="checkbox"
+            @change="toggle"
+            :checked="anyItemsChecked"
+            :indeterminate="indeterminate"
+            id="checkerOfAllBoxes"
+            class="relative top-0"
+        />
+    </label>
+</template>
diff --git a/resources/js/components/ui/Pagination.vue b/resources/js/components/ui/Pagination.vue
new file mode 100644
index 0000000000..28ece87dd4
--- /dev/null
+++ b/resources/js/components/ui/Pagination.vue
@@ -0,0 +1,197 @@
+<script setup>
+import HasInputOptions from '@statamic/components/fieldtypes/HasInputOptions.js';
+const normalizeInputOptions = HasInputOptions.methods.normalizeInputOptions;
+import { flatten, sortBy, range } from 'lodash-es';
+import { Select, Button } from '@statamic/ui';
+import { computed } from 'vue';
+
+const emit = defineEmits(['page-selected', 'per-page-changed']);
+
+const props = defineProps({
+    inline: { type: Boolean, default: false },
+    showTotals: { type: Boolean, default: false },
+    perPage: { type: Number },
+    resourceMeta: { type: Object, required: true },
+    scrollToTop: { type: Boolean, default: true },
+    showPageLinks: { type: Boolean, default: true },
+});
+
+const onEachSide = 3;
+const win = onEachSide * 2;
+const totalPages = computed(() => props.resourceMeta.last_page);
+
+const pages = computed(() => {
+    const els = elements.value;
+
+    let pages = [
+        els.first,
+        els.slider ? 'separator' : null,
+        els.slider,
+        els.last ? 'separator' : null,
+        els.last,
+    ].filter((i) => i !== null);
+
+    return flatten(pages);
+});
+
+const elements = computed(() => {
+    if (lastPage.value < onEachSide * 2 + 6) {
+        return getSmallSlider();
+    }
+
+    if (currentPage.value <= win) {
+        return getSliderTooCloseToBeginning();
+    } else if (currentPage.value > lastPage.value - win) {
+        return getSliderTooCloseToEnding();
+    }
+
+    return getFullSlider();
+});
+
+const currentPage = computed(() => props.resourceMeta.current_page);
+const lastPage = computed(() => props.resourceMeta.last_page);
+const hasMultiplePages = computed(() => totalPages.value > 1);
+const hasPrevious = computed(() => currentPage.value > 1);
+const hasNext = computed(() => currentPage.value < totalPages.value);
+
+const perPageOptions = computed(() => {
+    let defaultPaginationSize = Statamic.$config.get('paginationSize');
+    let defaultOptions = Statamic.$config.get('paginationSizeOptions').filter((size) => size !== defaultPaginationSize);
+    let options = normalizeInputOptions(defaultOptions);
+
+    options.push({
+        value: defaultPaginationSize,
+        label: `${defaultPaginationSize}`,
+    });
+
+    return sortBy(options, 'value');
+});
+
+const isPerPageEvenUseful = computed(() => props.resourceMeta.total > perPageOptions.value[0].value);
+const fromItem = computed(() => props.resourceMeta.from || 0);
+const toItem = computed(() => props.resourceMeta.to || 0);
+const totalItems = computed(() => props.resourceMeta.total);
+
+function selectPage(page) {
+    if (page === currentPage.value) {
+        return;
+    }
+
+    emit('page-selected', page);
+
+    if (props.scrollToTop) {
+        window.scrollTo(0, 0);
+    }
+}
+
+function selectPreviousPage() {
+    selectPage(currentPage.value - 1);
+}
+
+function selectNextPage() {
+    selectPage(currentPage.value + 1);
+}
+
+function getSmallSlider() {
+    return {
+        first: getRange(1, lastPage.value),
+        slider: null,
+        last: null,
+    };
+}
+
+function getFullSlider() {
+    return {
+        first: getStart(),
+        slider: getAdjacentRange(),
+        last: getFinish(),
+    };
+}
+
+function getSliderTooCloseToBeginning() {
+    return {
+        first: getRange(1, win + 2),
+        slider: null,
+        last: getFinish(),
+    };
+}
+
+function getSliderTooCloseToEnding() {
+    const last = getRange(lastPage.value - (win + 2), lastPage.value);
+
+    return {
+        first: getStart(),
+        slider: null,
+        last,
+    };
+}
+
+function getStart() {
+    return getRange(1, 2);
+}
+
+function getFinish() {
+    return getRange(lastPage.value - 1, lastPage.value);
+}
+
+function getAdjacentRange() {
+    return getRange(currentPage.value - onEachSide, currentPage.value + onEachSide);
+}
+
+function getRange(start, end) {
+    return range(start, end + 1);
+}
+</script>
+
+<template>
+    <div class="flex">
+        <div class="flex flex-1 items-center" v-if="!inline">
+            <div class="text-sm text-gray-500" v-if="showTotals && totalItems > 0">
+                {{ __(':start-:end of :total', { start: fromItem, end: toItem, total: totalItems }) }}
+            </div>
+        </div>
+
+        <div v-if="hasMultiplePages" class="flex items-center gap-1" :class="{ 'pagination-inline': inline }">
+            <Button
+                size="sm"
+                :variant="hasPrevious && !showPageLinks ? 'filled' : 'ghost'"
+                round
+                icon="ui/chevron-left"
+                :disabled="!hasPrevious"
+                @click="selectPreviousPage"
+            />
+
+            <Button
+                v-if="showPageLinks"
+                v-for="(page, i) in pages"
+                size="sm"
+                round
+                :variant="page == currentPage ? 'filled' : 'ghost'"
+                :key="i"
+                @click="selectPage(page)"
+                :disabled="page === 'separator' || page === currentPage"
+                :text="page === 'separator' ? '...' : String(page)"
+            />
+
+            <Button
+                size="sm"
+                :variant="hasNext && !showPageLinks ? 'filled' : 'ghost'"
+                round
+                icon="ui/chevron-right"
+                :disabled="!hasNext"
+                @click="selectNextPage"
+            />
+        </div>
+
+        <div class="flex flex-1 items-center justify-end" v-if="perPage && isPerPageEvenUseful">
+            <span class="me-3 text-sm text-gray-500">{{ __('Per Page') }}</span>
+            <Select
+                class="w-auto!"
+                size="sm"
+                :options="perPageOptions"
+                :model-value="perPage"
+                @update:model-value="$emit('per-page-changed', $event)"
+            />
+        </div>
+    </div>
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 57fa97d2e5..41b0785666 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -60,6 +60,7 @@ import { default as Textarea } from './Textarea.vue';
 import { default as TimePicker } from './TimePicker/TimePicker.vue';
 import { default as Tooltip } from './Tooltip.vue';
 import { default as Widget } from './Widget.vue';
+import { default as Pagination } from './Pagination.vue';
 
 export {
     Badge,
@@ -124,4 +125,5 @@ export {
     TimePicker,
     Tooltip,
     Widget,
+    Pagination,
 };

From 3e2a352286b0b170926827b32fdfc8a22670f4bc Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 11 Jun 2025 15:05:22 -0400
Subject: [PATCH 2/9] maxselections is a ref

---
 resources/js/components/ui/Listing/ToggleAll.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/resources/js/components/ui/Listing/ToggleAll.vue b/resources/js/components/ui/Listing/ToggleAll.vue
index f5d9a12a18..7ed5d7dde7 100644
--- a/resources/js/components/ui/Listing/ToggleAll.vue
+++ b/resources/js/components/ui/Listing/ToggleAll.vue
@@ -12,7 +12,7 @@ function toggle() {
 
 function checkMaximumAmountOfItems() {
     let newSelections = items.value.map((row) => row.id);
-    if (maxSelections) newSelections = newSelections.slice(0, maxSelections);
+    if (maxSelections.value) newSelections = newSelections.slice(0, maxSelections.value);
     selections.value.splice(0, selections.value.length, ...newSelections);
 }
 

From cca05c0cc39daf814be5ccde2ac49408c1c6262a Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 11 Jun 2025 15:26:31 -0400
Subject: [PATCH 3/9] wire up search

---
 .../js/components/ui/Listing/Listing.vue      | 13 +++++++++++
 resources/js/components/ui/Listing/Search.vue | 22 +++++++++++++++++--
 2 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index c18710790a..c38d0fe97f 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -61,6 +61,10 @@ const props = defineProps({
         type: Object,
         default: () => ({}),
     },
+    searchQuery: {
+        type: String,
+        default: null,
+    },
 });
 
 const id = uniqid();
@@ -73,12 +77,14 @@ const initializing = ref(true);
 const loading = ref(true);
 let popping = false;
 let source = null;
+const searchQuery = ref(null);
 
 const rawParameters = computed(() => ({
     page: currentPage.value,
     perPage: perPage.value,
     sort: props.sortColumn,
     order: props.sortDirection,
+    search: searchQuery.value,
 }));
 
 function setParameters(params) {
@@ -86,6 +92,7 @@ function setParameters(params) {
     perPage.value = parseInt(params.perPage);
     emit('update:sortColumn', params.sort);
     emit('update:sortDirection', params.order);
+    searchQuery.value = params.search;
 }
 
 const parameters = computed(() => {
@@ -224,6 +231,10 @@ function setPerPage(value) {
     perPage.value = value;
 }
 
+function setSearchQuery(query) {
+    searchQuery.value = query;
+}
+
 provideListingContext({
     loading,
     items,
@@ -238,6 +249,8 @@ provideListingContext({
     perPage,
     setPerPage,
     setCurrentPage,
+    searchQuery,
+    setSearchQuery,
 });
 
 const slotProps = computed(() => ({
diff --git a/resources/js/components/ui/Listing/Search.vue b/resources/js/components/ui/Listing/Search.vue
index 10f021a01e..cc75234f8c 100644
--- a/resources/js/components/ui/Listing/Search.vue
+++ b/resources/js/components/ui/Listing/Search.vue
@@ -1,5 +1,23 @@
-<script setup></script>
+<script setup>
+import { injectListingContext } from '@statamic/components/ui/Listing/Listing.vue';
+import { Input } from '@statamic/ui';
+import debounce from '@statamic/util/debounce.js';
+
+const { searchQuery, setSearchQuery } = injectListingContext();
+const placeholder = 'Search...';
+const searchQueryUpdated = debounce((event) => setSearchQuery(event.target.value), 300);
+</script>
 
 <template>
-    <div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Search</div>
+    <div class="min-w-64 lg:w-1/3">
+        <Input
+            autofocus
+            ref="input"
+            icon="magnifying-glass"
+            :placeholder="__(placeholder)"
+            :value="searchQuery"
+            @input="searchQueryUpdated"
+            @keyup.esc="setSearchQuery(null)"
+        />
+    </div>
 </template>

From 606ca40ec33d316b1b5ef371ca6e26c9ae61b4e7 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 11 Jun 2025 15:31:25 -0400
Subject: [PATCH 4/9] Make filter button look like it works (but doesnt yet)

---
 .../js/components/ui/Listing/Filters.vue      | 35 +++++++++++++++++--
 resources/js/components/ui/index.js           |  4 +++
 2 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/resources/js/components/ui/Listing/Filters.vue b/resources/js/components/ui/Listing/Filters.vue
index 5958daf7cc..08e9ead080 100644
--- a/resources/js/components/ui/Listing/Filters.vue
+++ b/resources/js/components/ui/Listing/Filters.vue
@@ -1,3 +1,34 @@
-<script setup></script>
+<script setup>
+import { Badge, Button, Modal, ModalClose } from '@statamic/ui';
+import { ref } from 'vue';
 
-<template><div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Filters</div></template>
+const activeCount = ref(2);
+</script>
+
+<template>
+    <div class="flex flex-1 items-center gap-3 overflow-x-auto py-3">
+        <Modal :title="__('Apply Filters')">
+            <template #trigger>
+                <Button icon="filter" class="relative">
+                    {{ __('Filter') }}
+                    <Badge
+                        v-if="activeCount"
+                        :text="activeCount"
+                        pill
+                        variant="filled"
+                        class="absolute -top-1.5 -right-1.5"
+                    />
+                </Button>
+            </template>
+            <div class="space-y-6 py-3">FILTERS GO HERE</div>
+            <template #footer>
+                <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                    <ModalClose>
+                        <Button text="Cancel" variant="ghost" />
+                    </ModalClose>
+                    <Button text="Update Filter" variant="primary" />
+                </div>
+            </template>
+        </Modal>
+    </div>
+</template>
diff --git a/resources/js/components/ui/index.js b/resources/js/components/ui/index.js
index 41b0785666..ccfd866b7b 100644
--- a/resources/js/components/ui/index.js
+++ b/resources/js/components/ui/index.js
@@ -61,6 +61,8 @@ import { default as TimePicker } from './TimePicker/TimePicker.vue';
 import { default as Tooltip } from './Tooltip.vue';
 import { default as Widget } from './Widget.vue';
 import { default as Pagination } from './Pagination.vue';
+import { default as Modal } from './Modal/Modal.vue';
+import { default as ModalClose } from './Modal/Close.vue';
 
 export {
     Badge,
@@ -126,4 +128,6 @@ export {
     Tooltip,
     Widget,
     Pagination,
+    Modal,
+    ModalClose,
 };

From 3728f7a8dfae29fc96c6e933fb9057cc473ef19d Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 11 Jun 2025 17:05:20 -0400
Subject: [PATCH 5/9] Column picker

---
 .../js/components/ui/Listing/ColumnPicker.vue | 154 +++++++++++++++++-
 .../js/components/ui/Listing/Listing.vue      |  17 +-
 resources/js/components/ui/Modal/Modal.vue    |   3 +-
 3 files changed, 170 insertions(+), 4 deletions(-)

diff --git a/resources/js/components/ui/Listing/ColumnPicker.vue b/resources/js/components/ui/Listing/ColumnPicker.vue
index 3168de7e1d..07a18d9afe 100644
--- a/resources/js/components/ui/Listing/ColumnPicker.vue
+++ b/resources/js/components/ui/Listing/ColumnPicker.vue
@@ -1,5 +1,155 @@
-<script setup></script>
+<script setup>
+import { Button, Modal, Tooltip } from '@statamic/ui';
+import { SortableList } from '@statamic/components/sortable/Sortable.js';
+import { injectListingContext } from '@statamic/components/ui/Listing/Listing.vue';
+import { computed, ref } from 'vue';
+
+const { preferencesPrefix, columns, visibleColumns, hiddenColumns, setColumns } = injectListingContext();
+const preferencesKey = ref(`${preferencesPrefix.value}.columns`);
+const saving = ref(false);
+const open = ref(false);
+
+const sortedHiddenColumns = computed(() => {
+    return hiddenColumns.value.sort((a, b) => a.label.toLowerCase().localeCompare(b.label.toLowerCase()));
+});
+
+const selectedColumns = computed({
+    get() {
+        return visibleColumns.value;
+    },
+    set(selectedColumns) {
+        setColumns([...selectedColumns, ...hiddenColumns.value]);
+    },
+});
+
+function close() {
+    open.value = false;
+}
+
+function save() {
+    saving.value = true;
+
+    Statamic.$preferences
+        .set(
+            preferencesKey.value,
+            selectedColumns.value.map((column) => column.field),
+        )
+        .then(() => {
+            saving.value = false;
+            close();
+            Statamic.$toast.success(__('These are now your default columns.'));
+        })
+        .catch(() => {
+            saving.value = false;
+            Statamic.$toast.error(__('Unable to save column preferences.'));
+        });
+}
+
+function reset() {
+    setColumns(
+        columns.value
+            .map((column) => ({ ...column, visible: column.defaultVisibility }))
+            .sort((a, b) => a.defaultOrder - b.defaultOrder),
+    );
+
+    saving.value = true;
+
+    Statamic.$preferences
+        .remove(preferencesKey.value)
+        .then(() => {
+            saving.value = false;
+            close();
+            Statamic.$toast.success(__('Columns have been reset to their defaults.'));
+        })
+        .catch(() => {
+            saving.value = false;
+            Statamic.$toast.error(__('Unable to save column preferences.'));
+        });
+}
+</script>
 
 <template>
-    <div class="rounded-lg border border-dashed p-2 text-sm leading-none text-gray-500">Columns</div>
+    <div>
+        <Modal :title="__('Customize Columns')" v-model:open="open">
+            <template #trigger>
+                <Tooltip :text="__('Customize Columns')">
+                    <Button icon="sliders-vertical" />
+                </Tooltip>
+            </template>
+            <div class="flex h-full flex-col">
+                <div class="dark:bg-dark-600 flex min-h-0 grow rounded-t-md bg-gray-100">
+                    <!-- Available Columns -->
+                    <div
+                        class="dark:border-dark-900 flex w-1/2 flex-col outline-hidden ltr:border-r ltr:text-left rtl:border-l rtl:text-right"
+                    >
+                        <header
+                            v-text="__('Available Columns')"
+                            class="dark:border-dark-900 dark:bg-dark-700 border-b bg-white px-3 py-2 text-sm font-medium"
+                        />
+                        <div
+                            class="flex flex-1 flex-col space-y-1 overflow-y-scroll px-3 py-2 shadow-inner select-none"
+                        >
+                            <div
+                                class="column-picker-item"
+                                v-for="column in sortedHiddenColumns"
+                                :key="column.field"
+                                v-if="hiddenColumns.length"
+                            >
+                                <label class="flex cursor-pointer items-center">
+                                    <input type="checkbox" class="ltr:mr-2 rtl:ml-2" v-model="column.visible" />
+                                    {{ __(column.label) }}
+                                </label>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Displayed Columns -->
+                    <div class="flex w-1/2 flex-col">
+                        <header
+                            v-text="__('Displayed Columns')"
+                            class="dark:border-dark-900 dark:bg-dark-700 flex-none border-b bg-white px-3 py-2 text-sm font-medium"
+                        />
+                        <div class="grow overflow-y-scroll shadow-inner">
+                            <sortable-list
+                                v-model="selectedColumns"
+                                :vertical="true"
+                                :distance="5"
+                                item-class="item"
+                                handle-class="item"
+                                append-to=".modal-body"
+                                constrain-dimensions
+                            >
+                                <div class="space-y-1 p-3 px-3 select-none">
+                                    <div
+                                        class="item sortable cursor-grab"
+                                        v-for="column in selectedColumns"
+                                        :key="column.field"
+                                        tabindex="-1"
+                                    >
+                                        <div class="item-move py-1">&nbsp;</div>
+                                        <div class="flex flex-1 items-center p-0 ltr:ml-2 rtl:mr-2">
+                                            <input
+                                                type="checkbox"
+                                                class="ltr:mr-2 rtl:ml-2"
+                                                v-model="column.visible"
+                                                :disabled="selectedColumns.length === 1 || column.required"
+                                            />
+                                            {{ __(column.label) }}
+                                        </div>
+                                    </div>
+                                </div>
+                            </sortable-list>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <template #footer v-if="preferencesKey">
+                <div class="flex items-center justify-end space-x-3 pt-3 pb-1">
+                    <Button :text="__('Cancel')" variant="ghost" @click="open = false" />
+                    <Button :text="__('Reset')" @click="reset" :disabled="saving" />
+                    <Button :text="__('Save')" variant="primary" @click="save" :disabled="saving" />
+                </div>
+            </template>
+        </Modal>
+    </div>
 </template>
diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index c38d0fe97f..e7484b8029 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -126,7 +126,7 @@ function request() {
             signal: source.signal,
         })
         .then((response) => {
-            emit('update:columns', response.data.meta.columns);
+            setColumns(response.data.meta.columns);
             activeFilterBadges.value = { ...response.data.meta.activeFilterBadges };
             items.value = Object.values(response.data.data);
             meta.value = response.data.meta;
@@ -187,6 +187,8 @@ const visibleColumns = computed(() => {
     return visibleColumns.length ? visibleColumns : props.columns;
 });
 
+const hiddenColumns = computed(() => props.columns.filter((column) => !column.visible));
+
 const sortableColumns = computed(() => {
     return props.columns.filter((column) => column.sortable).map((column) => column.field);
 });
@@ -195,6 +197,16 @@ function isColumnVisible(column) {
     return visibleColumns.value.find((c) => c.field === column);
 }
 
+function setColumns(columns) {
+    emit('update:columns', columns);
+}
+
+const testColumns = computed(() => {
+    return props.columns.map((column) => {
+        return [column.field, column.visible];
+    });
+});
+
 function setSortColumn(column) {
     if (!props.sortable) return;
 
@@ -240,7 +252,9 @@ provideListingContext({
     items,
     meta,
     columns: toRef(() => props.columns),
+    setColumns,
     visibleColumns,
+    hiddenColumns,
     sortColumn: toRef(() => props.sortColumn),
     setSortColumn,
     selections,
@@ -251,6 +265,7 @@ provideListingContext({
     setCurrentPage,
     searchQuery,
     setSearchQuery,
+    preferencesPrefix: toRef(() => props.preferencesPrefix),
 });
 
 const slotProps = computed(() => ({
diff --git a/resources/js/components/ui/Modal/Modal.vue b/resources/js/components/ui/Modal/Modal.vue
index 074f382459..d417a6aa82 100644
--- a/resources/js/components/ui/Modal/Modal.vue
+++ b/resources/js/components/ui/Modal/Modal.vue
@@ -5,6 +5,7 @@ import { DialogContent, DialogOverlay, DialogPortal, DialogRoot, DialogTitle, Di
 
 const props = defineProps({
     title: { type: String, default: '' },
+    open: { type: Boolean, default: false },
 });
 
 const hasModalTitleComponent = hasComponent('ModalTitle');
@@ -25,7 +26,7 @@ const modalClasses = cva({
 </script>
 
 <template>
-    <DialogRoot>
+    <DialogRoot :open="open" @update:open="$emit('update:open', $event)">
         <DialogTrigger data-ui-modal-trigger>
             <slot name="trigger" />
         </DialogTrigger>

From ace6bd5259664f70a3baf901dca4a700dec52e99 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 11 Jun 2025 17:07:50 -0400
Subject: [PATCH 6/9] Rename

---
 .../ui/Listing/{ColumnPicker.vue => CustomizeColumns.vue}         | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename resources/js/components/ui/Listing/{ColumnPicker.vue => CustomizeColumns.vue} (100%)

diff --git a/resources/js/components/ui/Listing/ColumnPicker.vue b/resources/js/components/ui/Listing/CustomizeColumns.vue
similarity index 100%
rename from resources/js/components/ui/Listing/ColumnPicker.vue
rename to resources/js/components/ui/Listing/CustomizeColumns.vue

From f650a105ecf2c1269063a5b69c6b32a958f3228e Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Wed, 11 Jun 2025 17:10:56 -0400
Subject: [PATCH 7/9] oops

---
 resources/js/components/ui/Listing/Listing.vue | 6 ------
 1 file changed, 6 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index e7484b8029..2e5a8694d4 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -201,12 +201,6 @@ function setColumns(columns) {
     emit('update:columns', columns);
 }
 
-const testColumns = computed(() => {
-    return props.columns.map((column) => {
-        return [column.field, column.visible];
-    });
-});
-
 function setSortColumn(column) {
     if (!props.sortable) return;
 

From 7f1d930a250a4f761891b922481c51ed18adedf6 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 12 Jun 2025 11:01:40 -0400
Subject: [PATCH 8/9] Put columns in the parameters. Avoid recursion in
 parameter watcher.

---
 resources/js/components/ui/Listing/Listing.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 2e5a8694d4..42ffed0233 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -85,6 +85,7 @@ const rawParameters = computed(() => ({
     sort: props.sortColumn,
     order: props.sortDirection,
     search: searchQuery.value,
+    columns: visibleColumns.value.map((column) => column.field).join(','),
 }));
 
 function setParameters(params) {
@@ -93,6 +94,13 @@ function setParameters(params) {
     emit('update:sortColumn', params.sort);
     emit('update:sortDirection', params.order);
     searchQuery.value = params.search;
+    emit(
+        'update:columns',
+        props.columns.map((column) => ({
+            ...column,
+            visible: params.columns.split(',').includes(column.field),
+        })),
+    );
 }
 
 const parameters = computed(() => {
@@ -197,8 +205,11 @@ function isColumnVisible(column) {
     return visibleColumns.value.find((c) => c.field === column);
 }
 
-function setColumns(columns) {
-    emit('update:columns', columns);
+function setColumns(newColumns) {
+    // Avoid unnecessary updates and infinite loops if the columns haven't changed.
+    if (JSON.stringify(newColumns) === JSON.stringify(props.columns)) return;
+
+    emit('update:columns', newColumns);
 }
 
 function setSortColumn(column) {
@@ -266,7 +277,8 @@ const slotProps = computed(() => ({
     isColumnVisible,
 }));
 
-watch(parameters, () => {
+watch(parameters, (newParams, oldParams) => {
+    if (JSON.stringify(newParams) === JSON.stringify(oldParams)) return;
     request();
     pushState();
 });

From df2f2fcba1e96a052dfa8ddc55b40f7edfdea258 Mon Sep 17 00:00:00 2001
From: Jason Varga <jason@pixelfear.com>
Date: Thu, 12 Jun 2025 11:24:07 -0400
Subject: [PATCH 9/9] allow columns, sortColumn, sortDirection, and selections
 to work without needing to pass them as props

---
 .../js/components/ui/Listing/Listing.vue      | 59 ++++++++++---------
 1 file changed, 30 insertions(+), 29 deletions(-)

diff --git a/resources/js/components/ui/Listing/Listing.vue b/resources/js/components/ui/Listing/Listing.vue
index 42ffed0233..6283adebe3 100644
--- a/resources/js/components/ui/Listing/Listing.vue
+++ b/resources/js/components/ui/Listing/Listing.vue
@@ -78,29 +78,35 @@ const loading = ref(true);
 let popping = false;
 let source = null;
 const searchQuery = ref(null);
+const columns = ref(props.columns);
+const sortColumn = ref(props.sortColumn || (props.columns.length ? props.columns[0].field : null));
+const sortDirection = ref(props.sortDirection || getDefaultSortDirectionForColumn(sortColumn.value));
+const selections = ref(props.selections || []);
 
 const rawParameters = computed(() => ({
     page: currentPage.value,
     perPage: perPage.value,
-    sort: props.sortColumn,
-    order: props.sortDirection,
+    sort: sortColumn.value,
+    order: sortDirection.value,
     search: searchQuery.value,
     columns: visibleColumns.value.map((column) => column.field).join(','),
 }));
 
+watch(columns, (newColumns) => emit('update:columns', newColumns));
+watch(sortColumn, (newSortColumn) => emit('update:sortColumn', newSortColumn));
+watch(sortDirection, (newSortDirection) => emit('update:sortDirection', newSortDirection));
+watch(selections, (newSelections) => emit('update:selections', newSelections), { deep: true });
+
 function setParameters(params) {
     currentPage.value = parseInt(params.page);
     perPage.value = parseInt(params.perPage);
-    emit('update:sortColumn', params.sort);
-    emit('update:sortDirection', params.order);
+    sortColumn.value = params.sort;
+    sortDirection.value = params.order;
     searchQuery.value = params.search;
-    emit(
-        'update:columns',
-        props.columns.map((column) => ({
-            ...column,
-            visible: params.columns.split(',').includes(column.field),
-        })),
-    );
+    columns.value = columns.value.map((column) => ({
+        ...column,
+        visible: params.columns.split(',').includes(column.field),
+    }));
 }
 
 const parameters = computed(() => {
@@ -185,20 +191,15 @@ function autoApplyState() {
     nextTick(() => (popping = false));
 }
 
-const selections = computed({
-    get: () => props.selections,
-    set: (selections) => emit('update:selections', selections),
-});
-
 const visibleColumns = computed(() => {
-    const visibleColumns = props.columns.filter((column) => column.visible);
-    return visibleColumns.length ? visibleColumns : props.columns;
+    const visibleColumns = columns.value.filter((column) => column.visible);
+    return visibleColumns.length ? visibleColumns : columns.value;
 });
 
-const hiddenColumns = computed(() => props.columns.filter((column) => !column.visible));
+const hiddenColumns = computed(() => columns.value.filter((column) => !column.visible));
 
 const sortableColumns = computed(() => {
-    return props.columns.filter((column) => column.sortable).map((column) => column.field);
+    return columns.value.filter((column) => column.sortable).map((column) => column.field);
 });
 
 function isColumnVisible(column) {
@@ -207,9 +208,9 @@ function isColumnVisible(column) {
 
 function setColumns(newColumns) {
     // Avoid unnecessary updates and infinite loops if the columns haven't changed.
-    if (JSON.stringify(newColumns) === JSON.stringify(props.columns)) return;
+    if (JSON.stringify(newColumns) === JSON.stringify(columns.value)) return;
 
-    emit('update:columns', newColumns);
+    columns.value = newColumns;
 }
 
 function setSortColumn(column) {
@@ -219,17 +220,17 @@ function setSortColumn(column) {
 
     // If sorting by the same column, toggle the direction.
     // Otherwise, set the default direction.
-    if (props.sortColumn === column) {
+    if (sortColumn.value === column) {
         toggleSortDirection();
     } else {
-        emit('update:sortDirection', getDefaultSortDirectionForColumn(column));
+        sortDirection.value = getDefaultSortDirectionForColumn(column);
     }
 
-    emit('update:sortColumn', column);
+    sortColumn.value = column;
 }
 
 function getColumnFieldtype(column) {
-    return props.columns.find((c) => c.field === column)?.fieldtype;
+    return columns.value.find((c) => c.field === column)?.fieldtype;
 }
 
 function getDefaultSortDirectionForColumn(column) {
@@ -237,7 +238,7 @@ function getDefaultSortDirectionForColumn(column) {
 }
 
 function toggleSortDirection() {
-    emit('update:sortDirection', props.sortDirection === 'asc' ? 'desc' : 'asc');
+    sortDirection.value = sortDirection.value === 'asc' ? 'desc' : 'asc';
 }
 
 function setCurrentPage(page) {
@@ -256,11 +257,11 @@ provideListingContext({
     loading,
     items,
     meta,
-    columns: toRef(() => props.columns),
+    columns,
     setColumns,
     visibleColumns,
     hiddenColumns,
-    sortColumn: toRef(() => props.sortColumn),
+    sortColumn,
     setSortColumn,
     selections,
     maxSelections: toRef(() => props.maxSelections),