Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DOC] Fix markdown of props tables. #5150

Merged
merged 2 commits into from
Aug 13, 2020
Merged

[DOC] Fix markdown of props tables. #5150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6e54749
Fix markdown of props tables.
Aug 12, 2020
b625602
Fix issues with latest Jekyll
djhi Aug 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
76 changes: 39 additions & 37 deletions docs/Fields.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,11 +27,13 @@ export const PostList = (props) => (

`Field` components need a `record` and a `source` prop to work, and basically display the `record[source]` data. There is nothing magic there - you can easily write your own:

{% raw %}
```jsx
const PurpleTextField = ({ record, source }) => (
<span style={{ color: 'purple' }}>{record[source]}</span>
);
```
{% endraw %}

Some react-admin components (e.g. `<Datagrid>` or `<SimpleShowLayout>`) clone their children and pass them a `record` value. That's why most of the time, you don't have to pass the `record` manually. But you can totally render a `Field` component by passing it a `record` value ; in fact, it's a great way to understand how `Field` components work:

Expand All @@ -57,21 +59,21 @@ const PostShow = ({ id }) => {

All field components accept the following props:

| Prop | Required | Type | Default | Description |
| ---|---|---|---|--- |
| `record` | Required | `Object` | - | Object containing the properties to display. `<Datagrid>`, `<SimpleForm>` and other components inject that prop to their children |
| `source` | Required | `string` | - | Name of the property to display |
| `label` | Optional | `string | ReactElement` | `source` | Used as a table header or an input label |
| `sortable` | Optional | `boolean` | `true` | When used in a `List`, should the list be sortable using the `source` attribute? Setting it to `false` disables the click handler on the column header. |
| `sortBy` | Optional | `string` | `source` | When used in a `List`, specifies the actual `source` to be used for sorting when the user clicks the column header |
| `sortByOrder` | Optional | `ASC | DESC` | `ASC` | When used in a `List`, specifies the sort order to be used for sorting when the user clicks the column header |
| `className` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field element itself |
| `cellClassName` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field container (e.g. the `<td>` in a `Datagrid`) |
| `headerClassName` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field header (e.g. the `<th>` in a `Datagrid`) |
| `formClassName` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field container when it is used inside `<SimpleForm>` or `<TabbedForm>` |
| `addLabel` | Optional | `boolean` | false | Defines the visibility of the label when the field is used in `<SimpleForm>`, `<FormTab>`, `<SimpleShowLayout>`, or `<Tab>`. It's `true` for all react-admin `<Field>` components. |
| `textAlign` | Optional | `string` | 'left' | Defines the text alignment inside a cell. Set to `right` for right alignment (e.g. for numbers) |
| `emptyText` | Optional | `string` | '' | Defines a text to be shown when a field has no value |
| Prop | Required | Type | Default | Description |
| ----------------- | -------- | ------------------------------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `record` | Required | `Object` | - | Object containing the properties to display. `<Datagrid>`, `<SimpleForm>` and other components inject that prop to their children |
| `source` | Required | `string` | - | Name of the property to display |
| `label` | Optional | `string` &#124; `ReactElement` | `source` | Used as a table header or an input label |
| `sortable` | Optional | `boolean` | `true` | When used in a `List`, should the list be sortable using the `source` attribute? Setting it to `false` disables the click handler on the column header. |
| `sortBy` | Optional | `string` | `source` | When used in a `List`, specifies the actual `source` to be used for sorting when the user clicks the column header |
| `sortByOrder` | Optional | `ASC` &#124; `DESC` | `ASC` | When used in a `List`, specifies the sort order to be used for sorting when the user clicks the column header |
| `className` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field element itself |
| `cellClassName` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field container (e.g. the `<td>` in a `Datagrid`) |
| `headerClassName` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field header (e.g. the `<th>` in a `Datagrid`) |
| `formClassName` | Optional | `string` | - | A class name (usually generated by JSS) to customize the look and feel of the field container when it is used inside `<SimpleForm>` or `<TabbedForm>` |
| `addLabel` | Optional | `boolean` | `false` | Defines the visibility of the label when the field is used in `<SimpleForm>`, `<FormTab>`, `<SimpleShowLayout>`, or `<Tab>`. It's `true` for all react-admin `<Field>` components. |
| `textAlign` | Optional | `string` | 'left' | Defines the text alignment inside a cell. Set to `right` for right alignment (e.g. for numbers) |
| `emptyText` | Optional | `string` | '' | Defines a text to be shown when a field has no value |

**Tip**: You can use field components inside the `Edit` or `Show` views, too:

Expand Down Expand Up @@ -408,14 +410,14 @@ This field is also often used within an [<FileInput />](./Inputs.md#fileinput) c

### Properties

| Prop | Required | Type | Default | Description |
| ---|---|---|---|--- |
| `src` | Optional | `string` | - | A function returning a string (or an element) to display based on a record |
| `title` | Optional | `string` | record.title | The name of the property containing the image source if the value is an array of objects |
| `target` | Optional | `string` | - | The link target. Set to "_blank" to open the file on a new tab |
| `download` | Optional | `boolean | string` | - | Prompts the user to save the linked URL instead of navigating to it |
| `ping` | Optional | `string` | - | A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking. |
| `rel` | Optional | `string` | - | The relationship of the linked URL as space-separated link types (e.g. 'noopener', 'canonical', etc.). |
| Prop | Required | Type | Default | Description |
| ---------- | -------- | ------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `src` | Optional | `string` | - | A function returning a string (or an element) to display based on a record |
| `title` | Optional | `string` | record.title | The name of the property containing the image source if the value is an array of objects |
| `target` | Optional | `string` | - | The link target. Set to "_blank" to open the file on a new tab |
| `download` | Optional | `boolean` &#124; `string` | - | Prompts the user to save the linked URL instead of navigating to it |
| `ping` | Optional | `string` | - | A space-separated list of URLs. When the link is followed, the browser will send POST requests with the body PING to the URLs. Typically for tracking. |
| `rel` | Optional | `string` | - | The relationship of the linked URL as space-separated link types (e.g. 'noopener', 'canonical', etc.). |

`<FileField>` also accepts the [common field props](./Fields.md#common-field-props).

Expand Down Expand Up @@ -468,10 +470,10 @@ import { NumberField } from 'react-admin';

### Properties

| Prop | Required | Type | Default | Description |
| ---|---|---|---|--- |
| `locales` | Optional | string | '' | Override the browser locale in the date formatting. Passed as first argument to `Intl.DateTimeFormat()`. |
| `options` | Optional | Object | - | Number formatting options. Passed as second argument to `Intl.NumberFormat()`. |
| Prop | Required | Type | Default | Description |
| --------- | -------- | ------ | ------- | -------------------------------------------------------------------------------------------------------- |
| `locales` | Optional | string | '' | Override the browser locale in the date formatting. Passed as first argument to `Intl.DateTimeFormat()`. |
| `options` | Optional | Object | - | Number formatting options. Passed as second argument to `Intl.NumberFormat()`. |

`<NumberField>` also accepts the [common field props](./Fields.md#common-field-props).

Expand Down Expand Up @@ -744,7 +746,7 @@ export const PostList = (props) => (
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'books' |
| `target` | Required | string | - | Target field carrying the relationship on the referenced resource, e.g. 'user_id' |
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records, passed to `getManyReference()` |
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
| `perPage` | Optional | `number` | 25 | Maximum number of referenced records to fetch |
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when fetching the related records, passed to `getManyReference()` |

Expand Down Expand Up @@ -857,15 +859,15 @@ export const PostList = (props) => (

### Properties

| Prop | Required | Type | Default | Description |
| ----------- | -------- | ------------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'tags' |
| `children` | Required | `Element` | - | The Field element used to render the referenced records |
| `sortBy` | Optional | `string | function` | `source` | When used in a List, name of the field to use for sorting when the user clicks on the column header. Set to `false` to disable the link. |
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records (the filtering is done client-side) |
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
| `perPage` | Optional | `number` | 1000 | Maximum number of results to display |
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when displaying the related records (the sort is done client-side) |
| Prop | Required | Type | Default | Description |
| ------------ | -------- | ------------------- | -------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- |
| `reference` | Required | `string` | - | The name of the resource for the referenced records, e.g. 'tags' |
| `children` | Required | `Element` | - | The Field element used to render the referenced records |
| `sortBy` | Optional | `string | function` | `source` | When used in a List, name of the field to use for sorting when the user clicks on the column header. Set to `false` to disable the link. |
| `filter` | Optional | `Object` | - | Filters to use when fetching the related records (the filtering is done client-side) |
| `pagination` | Optional | `Element` | - | Pagination element to display pagination controls. empty by default (no pagination) |
| `perPage` | Optional | `number` | 1000 | Maximum number of results to display |
| `sort` | Optional | `{ field, order }` | `{ field: 'id', order: 'DESC' }` | Sort order to use when displaying the related records (the sort is done client-side) |

`<ReferenceArrayField>` also accepts the [common field props](./Fields.md#common-field-props).

Expand Down
Loading