fix: avoid Table with no data overlay covering other elements

CONTRIBUTING.md

@@ -1,23 +1,29 @@
-# Setup
+## Setup
 
 1. Clone the repository
-1. `yarn`
+2. Run `yarn`
 
-# Usage
+## Usage
 
-## Validate correctness
+### Validate correctness
 
-    yarn validate
+```sh
+yarn validate
+```
 
-## Format code
+### Format code
 
-    yarn fix
+```sh
+yarn fix
+```
 
-## Try components interactively
+### Try components interactively
 
-    yarn storybook
+```sh
+yarn storybook
+```
 
-# Commit Messages
+## Commit Messages
 
 We use [semantic-release](https://github.com/semantic-release/semantic-release) to automatically generate
 - version number
@@ -28,3 +34,9 @@ This requires to write commit messages that follow the [Angular commit message f
 except that we do not use `scope` and `body` is always optional.
 
 Merge requests with a lot of intermediary commits must be cleaned up by force pushing rewritten commits.
+
+## Pre-releases
+
+When you want to test out your changes in a project before merging,
+you can push them to a branch `alpha` or `beta` to trigger a pre-release.
+See [publishing pre-releases](https://semantic-release.gitbook.io/semantic-release/recipes/release-workflow/pre-releases). 

src/Table/index.tsx

@@ -30,35 +30,36 @@ const StyledTable = styled(AntdTable)`
     font-size: ${fontSizeFromTheme};
   }
 
-  ${(props) => {
+  /* Avoid raising the "Keine Daten" overlay above elements such as the menu or dropdown, which have z-index 1050 */
+  .mll-ant-table-placeholder {
+    /* !important is necessary because antd sets the z-index to 9999 via the style attribute */
+    z-index: 1049 !important;
+  }
+
+  ${(props) =>
     // @ts-expect-error TODO it seems unsafe to pass empty data to onRow?
-    if (props.onRow?.({})?.onClick) {
-      return `
+    props.onRow?.({})?.onClick
+      ? `
         tbody tr:hover {
           cursor: pointer;
         }
-        `;
-    }
-
-    return '';
-  }}
+        `
+      : ''}
 ` as <RecordType extends Record<string, unknown> = Record<string, unknown>>(
   props: TableProps<RecordType>,
 ) => ReactElement;
 
 export function Table<
   RecordType extends Record<string, unknown> = Record<string, unknown>,
->(props: TableProps<RecordType>) {
-  const { loading, ...rest } = props;
-
+>({ loading, ...rest }: TableProps<RecordType>) {
   return (
     <StyledTable
       rowKey="id"
       {...rest}
       loading={
         typeof loading === 'object'
           ? {
-              spinning: Boolean(loading.spinning),
+              ...loading,
               indicator: loading.indicator ?? MllSpinnerSvg,
               size: loading.size ?? 'large',
             }
@@ -72,9 +73,7 @@ export function Table<
   );
 }
 
-/**
- * ag-grid like variant of the default table, has more contrast with other page elements.
- */
+/** ag-grid like variant of the default table, has more contrast with other page elements. */
 export const ColoredTable = styled(Table)`
   /* Always surround the entire table with a border */
   border: 1px solid ${(props) => props.theme.borderColor};