Sort columns in html.Table

Dash Python
1

I want to sort columns in a html.Table, but i dont wan to use dash_datatable. This is my code:

def generate_table(dataframe, max_rows=total_mostrar):
    max_value = 20
    min_value = 0
    rows = []
    for i in range(min(len(dataframe), max_rows)):
        row = []
        for col in dataframe.columns:
            #value = dataframe.iloc[i][col]
            #style = cell_style(value, min_value, max_value)
            if col == "Foto":
                row.append(html.Td([html.Img(src=dataframe.iloc[i][col],height="50px")],style={'position': 'sticky','left': 0,'z-index':1,'background-color':'white','border-collapse': 'collapse'}))
            elif col == "Nombre":
                row.append(html.Td([dataframe.iloc[i][col]],style={'position': 'sticky','left': 50,'z-index':1,'background-color':'white','border-collapse': 'collapse'}))
            elif col == "FechaNac" or col == "FechaFinContrato":
                if not pd.isnull(dataframe.iloc[i][col]):
                    row.append(html.Td([dataframe.iloc[i][col].strftime('%d/%m/%Y')],className="js-sort-date"))
                else:
                    row.append(html.Td(""))
            elif col == "Valor":
                if not pd.isnull(dataframe.iloc[i][col]):
                    row.append(html.Td([dataframe.iloc[i][col].astype(str) + "K €"]))
                else:
                    row.append(html.Td(""))
            elif col in caracteristicasTodas:
                value = dataframe.iloc[i][col]
                style = cell_style(value, min_value, max_value)
                row.append(html.Td(value, style=style))
            else:
                row.append(html.Td([dataframe.iloc[i][col]]))
            #row.append(html.Td(value, style=style))
        rows.append(html.Tr(row))
    return html.Div([
                html.Div([
                    html.Table(
                        # Header
                        [html.Tr([html.Th([col],style={'position': 'sticky','left': 0,'z-index':1,'border-collapse': 'collapse','background-color':'#142F80'}) if col == "Foto" else html.Th([col],style={'position': 'sticky','left': 50,'z-index':1,'border-collapse': 'collapse','background-color':'#142F80'}) if col == "Nombre" else html.Th([col]) for col in dataframe.columns])] +

                        # Body
                        rows)
                ],id='data-table',className='table-futbol')
            ],id="tablasEnDiv")

the problem is that columns are dynamic. Is it possible? I dont want use another css because of I created mine.

I would like to use something like this:

<script src="https://www.kryogenix.org/code/browser/sorttable/sorttable.js"></script>

<table class="sortable">
  <tr>
    <th>Name</th>
    <th>Address</th>
    <th>Sales Person</th>
  </tr>

  <tr >
    <td>user:2911002</td>
    <td>UK</td>
    <td>Melissa</td>
  </tr>
  <tr >
    <td>user:2201002</td>
    <td>France</td>
    <td>Justin</td>
  </tr>
  <tr>
    <td>user:2901092</td>
    <td>San Francisco</td>
    <td>Judy</td>
  </tr>
  <tr>
    <td>user:2801002</td>
    <td>Canada</td>
    <td>Skipper</td>
  </tr>
  <tr>
    <td>user:2901009</td>
    <td>Christchurch</td>
    <td>Alex</td>
  </tr>

</table>

I put https://www.kryogenix.org/code/browser/sorttable/sorttable.js like external script but doesnt work.

1 Like
2

I also really need to be able to sort without using DataTable. @chriddyp, you seem to be the person that answers the most questions about DataTable - any advice? I’ve compiled a list of community posts, stackoverflow, etc., and am totally out of ideas.