A NULL value indicates that a value does not exist in a database. It is important to clarify that NULL is not the same as blank or zero. Ideally, we want users to think of NULL values as placeholders for unknown or missing values applicable otherwise.
NULL ValuesWhen presented in tables, NULL values should be visually distinct so that the user understands that they are not the same as other string types. The style should attempt to communicate the absence of a value, similar to how placeholders are used in text input fields.
As for the process of transforming values to and from NULL, it will be important to have a consistent way of doing this across different data types.
NULL ValueNULL value in a tableNULL values.NULL value.
NULL in all uppercase lettersNULL value in a record previewNULL value.
NULL in all uppercase lettersNULL value in a boolean type column in checkbox display modeNULL values.NULL is displayed.NULL ValueNULL with a new valueNULL value in a column.edit mode.edit mode by pressing the enter key or clicking outside the active cell.NULL value.NULL with an empty stringNULL value in a column.edit mode.edit mode with a placeholder set to NULL.backspace key until the value is completely cleared.edit mode.NULL value. The cell appears blank.NULL value in a column set to boolean type with the checkbox display mode enabled.
NULL.NULL to checked TRUE.FALSE.NULL, the user can select the cell and press the delete key or use the contextual menu and select the Set as NULL option.NULL value in a column set to number type.edit mode without making any changes.NULL value remains unchanged.NULLNULL valuesShift+Backspace or Shift+Delete keys.Set as NULL option.NULL value.NULL valuesShift+Backspace or Shift+Delete keys.
NULL value.NULL constraint is applied to the column, and the system cannot insert NULL values.Set as NULL option.
NULL’ option is disabled, and the user cannot select it.In Select Mode, the cell is highlighted and set as the target for actions applying to the cell or elements associated with it, such as its row or column. Select Mode is toggled by clicking on a cell or by navigating to with the direction keys while Select Mode is active.
In Edit Mode, a cell provides additional functionality and interactions to users. Edit Mode is toggled by double-clicking on a cell or by typing a text character or pressing backspace while in Select Mode. However, certain data types could have different interactions. Once specific behaviors and components for each data type are introduced, we must further define these interactions to ensure compatibility.
We will create an additional issue to refine these interactions.
For the implementation of this spec, we should consider the following interactions for the editing of text and numeric types as summarized in the following table:
| current mode | DOM key |
result |
|---|---|---|
| select | any text character | switch to edit mode, place cursor at end, append a character to end of cell contents |
| select | Backspace |
switch to edit mode, place cursor at end, delete the last character |
| select | Delete |
nothing |
| select | Shift+Backspace |
set cell value to NULL |
| select | Shift+Delete |
set cell value to NULL |
| edit | Backspace |
delete a character to the left of cursor |
| edit | Delete |
delete a character to the right of cursor |
In the case of boolean types, consider the following:
checkbox is smaller than the cell, so clicking outside the checkbox would select the cell, and pressing delete would make the cell NULL.checkbox would toggle the value of the checkbox, similar to spreadsheets.Some column configurations will display a dropdown when editing the contents of a cell. For example, a column with a single-column foreign key constraint will show a record selector dropdown when in edit mode.
In the case of cells with dropdown enabled, consider the following:
NULL.NULL, the user can press the delete key while the cell is in select mode.NULL, the user can deselect a selected record from the record selector by clicking on a selected item and then closing the dropdown.