Config

Configuration is the core element of the whole administration. The configuration describes what the entities look like, what properties they have and what type they are.

We divide the configuration into schema and table.

Example of usage:

config={{ schema: SCHEMA, table: TABLE_CONFIG }}

TableConfig

Here you can configure specific settings for specific entity tables. Tables configured in this way will then be automatically displayed with your specific settings.

Example of table:

Here you can see the specific configured table for the user entity. The table will always be automatically displayed with the 'id' sort setting in ascending order.

const TABLE_CONFIG: ReactAdminerTableConfig = {
	user: {
		defaultSort: { id: 'asc' },
	},
};

Schema

The schema can be used to create the data skeleton itself. Here, the individual entities and their fields are set. Then you can set each field freely according to your needs using: filed properties. The complete schema should copy the skeleton of your datastore, i.e. for the entities you want to use react-adminer for.

Example of schema:

Here is the declaration schema itself. This is a suitably configured schema, for example, for a database of cars and their owners.

schema.tsx

import type { Schema } from 'react-adminer';
import { EditButton } from 'react-adminer';

export const SCHEMA: Schema = {
	car: {
		fields: [
			{
				name: 'id',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: false,
				editable: false,
				section: 'primarySection',
			},
			{
				name: 'make',
				label: 'MAKE',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: true,
				editable: true,
				section: 'secondarySection',
				helper: 'Vehicle manufacturer brand',
			},
			{
				name: 'model',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: true,
				editable: true,
				helper: 'Car model',
			},
			{
				name: 'year',
				nullable: false,
				type: 'number',
				sortable: true,
				creatable: true,
				editable: true,
				section: 'primarySection',
				helper: 'Year of manufacture',
			},
			{
				name: 'color',
				label: 'COLOR',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: true,
				editable: true,
				helper: 'Vehicle paint colour',
				grid: 8,
			},
			{
				name: 'userId',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: true,
				editable: true,
			},
			{
				name: 'createdDate',
				nullable: true,
				type: 'date',
				sortable: true,
				creatable: true,
				editable: true,
			},
			{
				name: 'serialNumber',
				nullable: true,
				type: 'number',
				sortable: true,
				creatable: true,
				editable: true,
				grid: 24,
			},
			{
				name: 'user',
				nullable: true,
				type: 'relation',
				relation: {
					type: 'one',
					entity: 'user',
				},
			},
			{
				name: 'edit',
				type: 'virtual',
				render: EditButton,
				virtual: true,
			},
		],
	},
	user: {
		fields: [
			{
				name: 'id',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: false,
				editable: false,
			},
			{
				name: 'created',
				sortable: false,
				creatable: false,
				type: 'datetime',
			},
			{
				name: 'name',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: true,
				editable: true,
			},
			{
				name: 'lastname',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: true,
				editable: true,
			},
			{
				name: 'email',
				nullable: false,
				type: 'string',
				sortable: true,
				creatable: true,
				editable: true,
			},
			{
				name: 'cars',
				nullable: true,
				type: 'relation',
				relation: {
					type: 'many',
					entity: 'car',
				},
			},
			{
				name: 'edit',
				type: 'virtual',
				render: EditButton,
				virtual: true,
			},
		],
	},
};