-
Notifications
You must be signed in to change notification settings - Fork 1.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* Add `LemonTable` base to Feature flags page * Fix basic styling * Rework more of the table * Fix column `align` * Update eventsListLogic.ts * Align FF table columns with design * Add pagination * Add table loader * Add `LemonTable` to Storybook * Add sorting * Increase feature flags page size to 50 * Add scroll indication * Fix minor issues * Fix typing * Update E2E test * Sort one column at a time * Add default sorting * Improve current page handling * Use search params for current page state * Don't mute disabled feature flags * Add overlay for loading state * Add profile picture to Created by and improve comments * Fix `createdByColumn` * Refactor the More button for reusability * Fix content sizing (pagination/loader filling full width when scrolled) * Remove need for `@ts-expect-error`
- Loading branch information
Showing
27 changed files
with
753 additions
and
199 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -46,5 +46,4 @@ | |
| margin: 0 0.5rem; | ||
| font-size: 1rem; | ||
| color: var(--primary-alt); | ||
| transform: rotate(-90deg); | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import React, { useState } from 'react' | ||
| import { LemonButton } from '.' | ||
| import { IconEllipsis } from '../icons' | ||
| import { PopupProps } from '../Popup/Popup' | ||
|
|
||
| export function More({ overlay }: Pick<PopupProps, 'overlay'>): JSX.Element { | ||
| const [visible, setVisible] = useState(false) | ||
|
|
||
| return ( | ||
| <LemonButton | ||
| compact | ||
| data-attr="more-button" | ||
| icon={<IconEllipsis />} | ||
| type="stealth" | ||
| onClick={(e) => { | ||
| setVisible((state) => !state) | ||
| e.stopPropagation() | ||
| }} | ||
| popup={{ | ||
| visible, | ||
| onClickOutside: () => setVisible(false), | ||
| onClickInside: () => setVisible(false), | ||
| placement: 'bottom-end', | ||
| actionable: true, | ||
| overlay, | ||
| }} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,159 @@ | ||
| .LemonTable { | ||
| position: relative; | ||
| width: 100%; | ||
| background: #fff; | ||
| border-radius: var(--radius); | ||
| border: 1px solid var(--border); | ||
| overflow: hidden; | ||
| &::before, | ||
| &::after { | ||
| transition: box-shadow 200ms ease; | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| pointer-events: none; | ||
| } | ||
| &::before { | ||
| box-shadow: 16px 0 16px -32px rgba(0, 0, 0, 0.25) inset; | ||
| } | ||
| &.LemonTable--scrollable-left::before { | ||
| box-shadow: 16px 0 16px -16px rgba(0, 0, 0, 0.25) inset; | ||
| } | ||
| &::after { | ||
| box-shadow: -16px 0 16px -32px rgba(0, 0, 0, 0.25) inset; | ||
| } | ||
| &.LemonTable--scrollable-right::after { | ||
| box-shadow: -16px 0 16px -16px rgba(0, 0, 0, 0.25) inset; | ||
| } | ||
| table { | ||
| width: 100%; | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
| thead { | ||
| background: var(--bg-mid); | ||
| font-size: 0.75rem; | ||
| font-weight: 600; | ||
| letter-spacing: 0.03125rem; | ||
| text-transform: uppercase; | ||
| } | ||
| tbody { | ||
| tr { | ||
| border-top: 1px solid var(--border); | ||
| } | ||
| td { | ||
| padding-top: 0.5rem; | ||
| padding-bottom: 0.5rem; | ||
| } | ||
| } | ||
| tr { | ||
| height: 3rem; | ||
| } | ||
| th, | ||
| td { | ||
| padding-left: 1rem; | ||
| padding-right: 1rem; | ||
| } | ||
|
|
||
| h4.row-name { | ||
| font-size: 0.875rem; | ||
| font-weight: 600; | ||
| color: inherit; | ||
| margin-bottom: 0.125rem; | ||
| } | ||
|
|
||
| span.row-description { | ||
| font-size: 0.75rem; | ||
| } | ||
| } | ||
|
|
||
| .LemonTable__scroll { | ||
| width: 100%; | ||
| overflow: auto hidden; | ||
| } | ||
|
|
||
| .LemonTable__content { | ||
| min-width: fit-content; | ||
| } | ||
|
|
||
| .LemonTable__overlay { | ||
| transition: opacity 200ms ease; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 100%; | ||
| height: 100%; | ||
| background: rgba(255, 255, 255, 0.5); | ||
| opacity: 0; | ||
| pointer-events: none; | ||
| .LemonTable--loading & { | ||
| opacity: 1; | ||
| pointer-events: auto; | ||
| } | ||
| } | ||
|
|
||
| .LemonTable__loader { | ||
| transition: height 200ms ease, top 200ms ease; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 3rem; | ||
| width: 100%; | ||
| height: 0; | ||
| background: var(--primary-bg-active); | ||
| overflow: hidden; | ||
| &::after { | ||
| content: ''; | ||
| position: absolute; | ||
| left: 0; | ||
| top: 0; | ||
| width: 50%; | ||
| height: 100%; | ||
| animation: loading-bar 1.5s linear infinite; | ||
| background: var(--primary); | ||
| } | ||
| .LemonTable--loading & { | ||
| top: 2.75rem; | ||
| height: 0.25rem; | ||
| } | ||
| } | ||
|
|
||
| .LemonTable__pagination { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: end; | ||
| height: 3rem; | ||
| border-top: 1px solid var(--border); | ||
| padding: 0 1rem; | ||
| > span { | ||
| margin-right: 0.5rem; | ||
| } | ||
| } | ||
|
|
||
| .LemonTable__header--actionable { | ||
| cursor: pointer; | ||
| } | ||
|
|
||
| .LemonTable__header-content { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-between; | ||
| } | ||
|
|
||
| @keyframes loading-bar { | ||
| 0% { | ||
| left: 0; | ||
| width: 33.333%; | ||
| transform: translateX(-100%); | ||
| } | ||
| 50% { | ||
| width: 50%; | ||
| } | ||
| 100% { | ||
| left: 100%; | ||
| width: 33.333%; | ||
| transform: translateX(100%); | ||
| } | ||
| } |
28 changes: 28 additions & 0 deletions
28
frontend/src/lib/components/LemonTable/LemonTable.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| import React from 'react' | ||
| import { ComponentMeta } from '@storybook/react' | ||
|
|
||
| import { LemonTable as _LemonTable } from './LemonTable' | ||
|
|
||
| export default { | ||
| title: 'PostHog/Components/LemonTable', | ||
| component: _LemonTable, | ||
| parameters: { options: { showPanel: true } }, | ||
| argTypes: { | ||
| loading: { | ||
| control: { | ||
| type: 'boolean', | ||
| }, | ||
| }, | ||
| }, | ||
| } as ComponentMeta<typeof _LemonTable> | ||
|
|
||
| export function LemonTable({ loading }: { loading: boolean }): JSX.Element { | ||
| return ( | ||
| <_LemonTable | ||
| loading={loading} | ||
| columns={[{ title: 'Column' }]} | ||
| dataSource={[] as Record<string, any>[]} | ||
| pagination={{ pageSize: 10 }} | ||
| /> | ||
| ) | ||
| } |
Oops, something went wrong.