Filters and Sorting

The index page is for listing all the records of a model. It is the default page for a model. It is also the page that is shown when you click on the model name in the sidebar. The component structure of the index page is as follows:

Filtering

Changing default filters

The default filters are what the UI will revert to when the user clears all filters. By default the data is filtered by base owner. You can change the default filters by overriding the ModelIndex component (which passes the filter to the useModelIndexController)

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelIndex: { props: { defaultFilter: { published: true } } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelIndex: { props: { defaultFilter: { published: true } } }
    }
  }
}

tip

The base owner filters are included by default to limit the query to the current user or organization - if you want to disable them set defaultFiltersBaseOwner

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelIndex: { props: { defaultFiltersBaseOwner: false, defaultFilter: { published: true } } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelIndex: { props: { defaultFiltersBaseOwner: false, defaultFilter: { published: true } } }
    }
  }
}

Changing filters and displayed order

List the specific filters in the desired order:

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFilters: { props: { paths: ['created_at', 'published_at', 'category'] } }
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFilters: { props: { paths: ['created_at', 'published_at', 'category'] } }
    }
  }
}

Changing filter label

Filter labels default to ModelFilterLabel. To change the label of a particular column, you can override for the particular attribute.

src/rhino.config.js

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      created_at: {
        ModelFilterLabel: () => "Created",
      },
    },
  },
};

Adding an operator

An filter operator can be added to a filter by adding the operator to the filter path:

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelFilters: { props: { paths: ['created_at::gteq']}}
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelFilters: { props: { paths: ['created_at::gteq']}}
    }
  }
}

See operators for a complete list of operators.

Sorting

Changing the default sort order

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelIndex: { props: { defaultOrder: 'created_at' }}
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelIndex: { props: { defaultOrder: 'created_at' }}
    }
  }
}

Changing the sortable columns

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelIndexTable: { props: { sortPaths: ['blog.title'] }}
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog_post: {
      ModelIndexTable: { props: { sortPaths: ['blog.title'] }}
    }
  }
}

Pagination

Changing the default page size

Global

const rhinoConfig = {
  version: 1,
  components: {
    ModelIndex: { props: { defaultLimit: 20 }}
  }
}

Model

const rhinoConfig = {
  version: 1,
  components: {
    blog: {
      ModelIndex: { props: { defaultLimit: 20 }}
    }
  }
}