Business
Jobs
  • About Us
  • Solutions
    • Job Postings
      Post your job and receive qualified candidates in 48h.
    • Candidate Assessments
      500+ technical and psychological tests, plus anti-fraud.
    • Headhunting
      Tailor-made executive search from start to finish.
    • Payroll + EOR
      Payroll dispersal and EOR across 15+ LATAM countries.
  • Pricing
  • Jobs

0

398
Views
¿Cómo ordenar una columna Material UI DataGrid programáticamente?

Hola, tengo un DataGrid con una columna que tiene un encabezado personalizado. Este encabezado es un Select. Lo que quiero hacer es cada vez que el usuario selecciona una opción, la columna debe ordenarse desc. El renderHeader se ve así

 renderHeader: (params) => { return <CategoryPickerHeader value={category} handleChange={setCategory} />; },

Sé que la API de DataGrid tiene un par de métodos para ordenar ( https://v4.mui.com/api/data-grid/grid-api/#main-content ) sortColumn() & applySorting()

Pero no he encontrado ningún ejemplo de cómo usar esos métodos api.

¿Alguien puede dar un ejemplo o sabe cómo usar la API de DataGrid?

¡Gracias por adelantado!

about 4 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Visita esta página, esta tiene un ejemplo: https://codesandbox.io/s/ugeb8?file=/demo.js

IMPORTANTE: pase los argumentos a la propiedad sortModel, es esta respuesta

 import * as React from 'react'; import { DataGrid } from '@mui/x-data-grid'; import { useDemoData } from '@mui/x-data-grid-generator'; export default function BasicSortingGrid() { const { data } = useDemoData({ dataSet: 'Commodity', rowLength: 10, maxColumns: 6, }); const [sortModel, setSortModel] = React.useState([ { field: 'commodity', sort: 'asc', }, ]); return ( <div style={{ height: 400, width: '100%' }}> <DataGrid {...data} sortModel={sortModel} onSortModelChange={(model) => setSortModel(model)} /> </div> ); }

about 4 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Sales
Legal
Terms and conditions Privacy policy
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Show me some job opportunities
There's an error!