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.NULL
NULL
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.