diff --git a/README.md b/README.md index 4ad256b97a..a59a54c06b 100644 --- a/README.md +++ b/README.md @@ -23,6 +23,7 @@ Parse Dashboard is a standalone dashboard for managing your [Parse Server](https * [App Icon Configuration](#app-icon-configuration) * [App Background Color Configuration](#app-background-color-configuration) * [Other Configuration Options](#other-configuration-options) + * [Prevent columns sorting](#prevent-columns-sorting) * [Running as Express Middleware](#running-as-express-middleware) * [Deploying Parse Dashboard](#deploying-parse-dashboard) * [Preparing for Deployment](#preparing-for-deployment) @@ -241,6 +242,33 @@ You can set `appNameForURL` in the config file for each app to control the url o To change the app to production, simply set `production` to `true` in your config file. The default value is false if not specified. + ### Prevent columns sorting + +You can prevent some columns to be sortable by adding `preventSort` to columnPreference options in each app configuration + +```json + +"apps": [ + { + "appId": "local_app_id", + "columnPreference": { + "_User": [ + { + "name": "createdAt", + "visible": true, + "preventSort": true + }, + { + "name": "updatedAt", + "visible": true, + "preventSort": false + }, + ] + } + } +] +``` + # Running as Express Middleware Instead of starting Parse Dashboard with the CLI, you can also run it as an [express](https://github.com/expressjs/express) middleware. diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js index a773e13cf4..04007d4426 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.react.js @@ -27,7 +27,7 @@ export default class DataBrowserHeaderBar extends React.Component { ]; - headers.forEach(({ width, name, type, targetClass, order, visible }, i) => { + headers.forEach(({ width, name, type, targetClass, order, visible, preventSort }, i) => { if (!visible) return; let wrapStyle = { width }; if (i % 2) { @@ -36,15 +36,20 @@ export default class DataBrowserHeaderBar extends React.Component { wrapStyle.background = '#66637A'; } let onClick = null; - if (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean') { + if (!preventSort && (type === 'String' || type === 'Number' || type === 'Date' || type === 'Boolean')) { onClick = () => updateOrdering((order === 'descending' ? '' : '-') + name); } + let className = styles.wrap; + if (preventSort) { + className += ` ${styles.preventSort} `; + } + elements.push(
diff --git a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss index eb38c70c29..01a1283b32 100644 --- a/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss +++ b/src/components/DataBrowserHeaderBar/DataBrowserHeaderBar.scss @@ -72,3 +72,9 @@ } } } + +.preventSort { + :hover { + cursor: not-allowed; + } +} diff --git a/src/dashboard/Data/Browser/BrowserTable.react.js b/src/dashboard/Data/Browser/BrowserTable.react.js index bfdc488dab..f68853ac59 100644 --- a/src/dashboard/Data/Browser/BrowserTable.react.js +++ b/src/dashboard/Data/Browser/BrowserTable.react.js @@ -98,14 +98,15 @@ export default class BrowserTable extends React.Component { } } - let headers = this.props.order.map(({ name, width, visible }) => ( + let headers = this.props.order.map(({ name, width, visible, preventSort }) => ( { width: width, name: name, type: this.props.columns[name].type, targetClass: this.props.columns[name].targetClass, order: ordering.col === name ? ordering.direction : null, - visible + visible, + preventSort } )); let editor = null; @@ -140,7 +141,7 @@ export default class BrowserTable extends React.Component { setRelation={this.props.setRelation} setCopyableValue={this.props.setCopyableValue} setContextMenu={this.props.setContextMenu} - onEditSelectedRow={this.props.onEditSelectedRow} + onEditSelectedRow={this.props.onEditSelectedRow} />