Estoy usando el componente de tablas de datos de vuetify para mostrar objetos de este esquema:
{ date: '2021-12-23T11:12:18.669Z', type: 0, name: 'Meter-234452', temperature: '46', param_value: '23', floor_temp: '23' },Pero en mi gancho montado estoy anulando el campo de fecha para formatearlo según lo solicitado por el propietario del producto:
... moment(date).format('DD.MM.YYYY HH.mm')También estoy agrupando los datos por el campo "nombre" que funciona perfectamente bien. Pero ordenar los datos por fecha no funciona en absoluto, solo los ordenará por el día que tiene sentido.
Traté de especificar una función personalizada en el accesorio de custom-sort del componente de la siguiente manera:
customSort (items, sortBy, sortDesc, locale) { const activeSortColumn = sortBy[0] const activeSortDesc = sortDesc[0] items.sort((a, b) => { if (activeSortColumn === 'date') { const dateA = moment(a.date, 'DD.MM.YYYY HH.mm').toDate() const dateB = moment(b.date, 'DD.MM.YYYY HH.mm').toDate() return activeSortDesc ? dateA - dateB : dateB - dateA } return activeSortDesc ? ('' + a[activeSortColumn]).localeCompare(b[activeSortColumn]) : ('' + b[activeSortColumn]).localeCompare(a[activeSortColumn]) }) return items },Esto funciona perfectamente bien si no uso la agrupación, pero si estoy agrupando y especificando esta función de clasificación personalizada, se verá así:
La clasificación sigue siendo correcta, pero también cambió la agrupación, lo que también tiene sentido. Supongo que se está ordenando y luego agrupando, lo que hace que se creen grupos duplicados.
No estoy seguro de cómo resolver esto, ya que me gustaría mantener la agrupación, pero también debo proporcionar la clasificación correcta para el formato de fecha y todas las demás columnas a la vez. Me di cuenta de que el parámetro sortBy será una matriz que también incluye el campo agrupado si se está utilizando, así que pensé en ordenar la matriz de datos dos veces.
Agradezco cualquier ayuda!
Ahora lo resolví con una solución alternativa configurando la propiedad de clasificación del encabezado de la tabla para que se clasifique. Fue bastante complicado encontrar esto, por lo que en caso de que alguien más se encuentre con este problema, consulte el ejemplo de encabezado de tabla de la API v-data-table .
Lo usé para especificar una función de clasificación separada solo para este encabezado de tabla como este:
customSort (a, b) { return moment(a, this.tableDateFormat).toDate() - moment(b, this.tableDateFormat).toDate() },También funcionará con fechas simples de JavaScript, pero también estamos usando el momento para el resto de nuestro proyecto.