@ant-design/icons#TableOutlined TypeScript Examples
The following examples show how to use
@ant-design/icons#TableOutlined.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: AppsPage.tsx From disco-cube-admin with MIT License | 5 votes |
|
apps: Record<
AppNames,
{
path: string;
render: () => React.ReactNode;
label: string;
icon: React.ForwardRefExoticComponent<AntdIconProps & React.RefAttributes<HTMLSpanElement>>;
}
> = {
rpiDemos: {
path: `/rpi-demos`,
label: "RPI Demos",
icon: BuildOutlined,
render: () => <ConnectedRpiDemos />,
},
video: {
path: `/video`,
label: "Video",
icon: VideoCameraOutlined,
render: () => <ConnectedVideoApp />,
},
cubemap: {
path: `/cubemap`,
label: "Cubemap",
icon: PictureOutlined,
render: () => <ConnectedCubemapApp />,
},
paint: {
path: `/paint`,
label: "Paint",
icon: HighlightOutlined,
render: () => <ConnectedPaintApp />,
},
debug: {
path: `/debug`,
label: "Debug",
icon: BugOutlined,
render: () => <ConnectedCommonApp appName={`debug`} />,
},
sparkle: {
path: `/sparkle`,
label: "Sparkle",
icon: StarOutlined,
render: () => <ConnectedCommonApp appName={`sparkle`} />,
},
sprinkles: {
path: `/sprinkles`,
label: "Sprinkles",
icon: SmallDashOutlined,
render: () => <ConnectedCommonApp appName={`sprinkles`} />,
},
particles: {
path: `/particles`,
label: "Particles",
icon: MoreOutlined,
render: () => <ConnectedCommonApp appName={`particles`} />,
},
particleFlow: {
path: `/particleFlow`,
label: "Particle Flow",
icon: DeploymentUnitOutlined,
render: () => <ConnectedCommonApp appName={`particleFlow`} />,
},
tilt: {
path: `/tilt`,
label: "Tilt",
icon: RotateRightOutlined,
render: () => <ConnectedCommonApp appName={`tilt`} />,
},
maze: {
path: `/maze`,
label: "Maze",
icon: TableOutlined,
render: () => <ConnectedCommonApp appName={`maze`} />,
},
}
Example #2
| Source File: ChartTypeSelector.tsx From datart with Apache License 2.0 | 5 votes |
|
ChartTypeSelector: FC<{
type;
translate: (title: string) => string;
onChange: (value) => void;
onCreateDownloadDataTask?: () => void;
}> = memo(({ type, onChange, onCreateDownloadDataTask }) => {
const t = useI18NPrefix(`viz.action.common`);
const typeChange = useCallback(
type => () => {
onChange(type);
},
[onChange],
);
return (
<StyledChartTypeSelector>
<TypeSelector
fontSize={FONT_SIZE_HEADING}
className={classnames({ active: type === ChartPresentType.GRAPH })}
onClick={typeChange(ChartPresentType.GRAPH)}
>
<AreaChartOutlined />
</TypeSelector>
<TypeSelector
fontSize={FONT_SIZE_HEADING}
className={classnames({ active: type === ChartPresentType.RAW })}
onClick={typeChange(ChartPresentType.RAW)}
>
<TableOutlined />
</TypeSelector>
<TypeSelector
fontSize={FONT_SIZE_HEADING}
className={classnames({ active: type === ChartPresentType.SQL })}
onClick={typeChange(ChartPresentType.SQL)}
>
<ConsoleSqlOutlined />
</TypeSelector>
<TypeSelector
fontSize={FONT_SIZE_HEADING}
className={classnames({ active: type === ChartPresentType.DOWNLOAD })}
>
<Popconfirm
placement="left"
title={t('downloadForExcel')}
onConfirm={onCreateDownloadDataTask}
>
<CloudDownloadOutlined />
</Popconfirm>
</TypeSelector>
</StyledChartTypeSelector>
);
})
Example #3
| Source File: ChartFilter.tsx From posthog-foss with MIT License | 4 votes |
|
export function ChartFilter({ filters, onChange, disabled }: ChartFilterProps): JSX.Element {
const { insightProps } = useValues(insightLogic)
const { chartFilter } = useValues(chartFilterLogic(insightProps))
const { setChartFilter } = useActions(chartFilterLogic(insightProps))
const { preflight } = useValues(preflightLogic)
const cumulativeDisabled = filters.insight === InsightType.STICKINESS || filters.insight === InsightType.RETENTION
const tableDisabled = false
const pieDisabled = filters.insight === InsightType.RETENTION || filters.insight === InsightType.STICKINESS
const barDisabled = filters.insight === InsightType.RETENTION
const barValueDisabled =
barDisabled || filters.insight === InsightType.STICKINESS || filters.insight === InsightType.RETENTION
const defaultDisplay: ChartDisplayType =
filters.insight === InsightType.RETENTION
? ChartDisplayType.ActionsTable
: filters.insight === InsightType.FUNNELS
? ChartDisplayType.FunnelViz
: ChartDisplayType.ActionsLineGraphLinear
function Label({ icon, children = null }: { icon: React.ReactNode; children: React.ReactNode }): JSX.Element {
return (
<>
{icon} {children}
</>
)
}
function WarningTag({ children = null }: { children: React.ReactNode }): JSX.Element {
return (
<Tag color="orange" style={{ marginLeft: 8, fontSize: 10 }}>
{children}
</Tag>
)
}
const options =
filters.insight === InsightType.FUNNELS
? preflight?.is_clickhouse_enabled
? [
{
value: FunnelVizType.Steps,
label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
},
{
value: FunnelVizType.Trends,
label: (
<Label icon={<LineChartOutlined />}>
Trends
<WarningTag>BETA</WarningTag>
</Label>
),
},
]
: [
{
value: FunnelVizType.Steps,
label: <Label icon={<OrderedListOutlined />}>Steps</Label>,
},
]
: [
{
label: 'Line Chart',
options: [
{
value: ChartDisplayType.ActionsLineGraphLinear,
label: <Label icon={<LineChartOutlined />}>Linear</Label>,
},
{
value: ChartDisplayType.ActionsLineGraphCumulative,
label: <Label icon={<AreaChartOutlined />}>Cumulative</Label>,
disabled: cumulativeDisabled,
},
],
},
{
label: 'Bar Chart',
options: [
{
value: ChartDisplayType.ActionsBarChart,
label: <Label icon={<BarChartOutlined />}>Time</Label>,
disabled: barDisabled,
},
{
value: ChartDisplayType.ActionsBarChartValue,
label: <Label icon={<BarChartOutlined />}>Value</Label>,
disabled: barValueDisabled,
},
],
},
{
value: ChartDisplayType.ActionsTable,
label: <Label icon={<TableOutlined />}>Table</Label>,
disabled: tableDisabled,
},
{
value: ChartDisplayType.ActionsPieChart,
label: <Label icon={<PieChartOutlined />}>Pie</Label>,
disabled: pieDisabled,
},
]
return (
<Select
key="2"
defaultValue={filters.display || defaultDisplay}
value={chartFilter || defaultDisplay}
onChange={(value: ChartDisplayType | FunnelVizType) => {
setChartFilter(value)
onChange?.(value)
}}
bordered
dropdownAlign={ANTD_TOOLTIP_PLACEMENTS.bottomRight}
dropdownMatchSelectWidth={false}
data-attr="chart-filter"
disabled={disabled}
options={options}
/>
)
}
Example #4
| Source File: Icon.tsx From html2sketch with MIT License | 4 votes |
|
IconSymbol: FC = () => {
return (
<Row>
{/*<CaretUpOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/1.CaretUpOutlined'}*/}
{/*/>*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.MailOutlined'}*/}
{/*/>*/}
{/*<StepBackwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
{/*<StepForwardOutlined*/}
{/* className="icon"*/}
{/* symbolName={'1.General/2.Icons/2.StepBackwardOutlined'}*/}
{/*/>*/}
<StepForwardOutlined />
<ShrinkOutlined />
<ArrowsAltOutlined />
<DownOutlined />
<UpOutlined />
<LeftOutlined />
<RightOutlined />
<CaretUpOutlined />
<CaretDownOutlined />
<CaretLeftOutlined />
<CaretRightOutlined />
<VerticalAlignTopOutlined />
<RollbackOutlined />
<FastBackwardOutlined />
<FastForwardOutlined />
<DoubleRightOutlined />
<DoubleLeftOutlined />
<VerticalLeftOutlined />
<VerticalRightOutlined />
<VerticalAlignMiddleOutlined />
<VerticalAlignBottomOutlined />
<ForwardOutlined />
<BackwardOutlined />
<EnterOutlined />
<RetweetOutlined />
<SwapOutlined />
<SwapLeftOutlined />
<SwapRightOutlined />
<ArrowUpOutlined />
<ArrowDownOutlined />
<ArrowLeftOutlined />
<ArrowRightOutlined />
<LoginOutlined />
<LogoutOutlined />
<MenuFoldOutlined />
<MenuUnfoldOutlined />
<BorderBottomOutlined />
<BorderHorizontalOutlined />
<BorderInnerOutlined />
<BorderOuterOutlined />
<BorderLeftOutlined />
<BorderRightOutlined />
<BorderTopOutlined />
<BorderVerticleOutlined />
<PicCenterOutlined />
<PicLeftOutlined />
<PicRightOutlined />
<RadiusBottomleftOutlined />
<RadiusBottomrightOutlined />
<RadiusUpleftOutlined />
<RadiusUprightOutlined />
<FullscreenOutlined />
<FullscreenExitOutlined />
<QuestionOutlined />
<PauseOutlined />
<MinusOutlined />
<PauseCircleOutlined />
<InfoOutlined />
<CloseOutlined />
<ExclamationOutlined />
<CheckOutlined />
<WarningOutlined />
<IssuesCloseOutlined />
<StopOutlined />
<EditOutlined />
<CopyOutlined />
<ScissorOutlined />
<DeleteOutlined />
<SnippetsOutlined />
<DiffOutlined />
<HighlightOutlined />
<AlignCenterOutlined />
<AlignLeftOutlined />
<AlignRightOutlined />
<BgColorsOutlined />
<BoldOutlined />
<ItalicOutlined />
<UnderlineOutlined />
<StrikethroughOutlined />
<RedoOutlined />
<UndoOutlined />
<ZoomInOutlined />
<ZoomOutOutlined />
<FontColorsOutlined />
<FontSizeOutlined />
<LineHeightOutlined />
<SortAscendingOutlined />
<SortDescendingOutlined />
<DragOutlined />
<OrderedListOutlined />
<UnorderedListOutlined />
<RadiusSettingOutlined />
<ColumnWidthOutlined />
<ColumnHeightOutlined />
<AreaChartOutlined />
<PieChartOutlined />
<BarChartOutlined />
<DotChartOutlined />
<LineChartOutlined />
<RadarChartOutlined />
<HeatMapOutlined />
<FallOutlined />
<RiseOutlined />
<StockOutlined />
<BoxPlotOutlined />
<FundOutlined />
<SlidersOutlined />
<AndroidOutlined />
<AppleOutlined />
<WindowsOutlined />
<IeOutlined />
<ChromeOutlined />
<GithubOutlined />
<AliwangwangOutlined />
<DingdingOutlined />
<WeiboSquareOutlined />
<WeiboCircleOutlined />
<TaobaoCircleOutlined />
<Html5Outlined />
<WeiboOutlined />
<TwitterOutlined />
<WechatOutlined />
<AlipayCircleOutlined />
<TaobaoOutlined />
<SkypeOutlined />
<FacebookOutlined />
<CodepenOutlined />
<CodeSandboxOutlined />
<AmazonOutlined />
<GoogleOutlined />
<AlipayOutlined />
<AntDesignOutlined />
<AntCloudOutlined />
<ZhihuOutlined />
<SlackOutlined />
<SlackSquareOutlined />
<BehanceSquareOutlined />
<DribbbleOutlined />
<DribbbleSquareOutlined />
<InstagramOutlined />
<YuqueOutlined />
<AlibabaOutlined />
<YahooOutlined />
<RedditOutlined />
<SketchOutlined />
<AccountBookOutlined />
<AlertOutlined />
<ApartmentOutlined />
<ApiOutlined />
<QqOutlined />
<MediumWorkmarkOutlined />
<GitlabOutlined />
<MediumOutlined />
<GooglePlusOutlined />
<AppstoreAddOutlined />
<AppstoreOutlined />
<AudioOutlined />
<AudioMutedOutlined />
<AuditOutlined />
<BankOutlined />
<BarcodeOutlined />
<BarsOutlined />
<BellOutlined />
<BlockOutlined />
<BookOutlined />
<BorderOutlined />
<BranchesOutlined />
<BuildOutlined />
<BulbOutlined />
<CalculatorOutlined />
<CalendarOutlined />
<CameraOutlined />
<CarOutlined />
<CarryOutOutlined />
<CiCircleOutlined />
<CiOutlined />
<CloudOutlined />
<ClearOutlined />
<ClusterOutlined />
<CodeOutlined />
<CoffeeOutlined />
<CompassOutlined />
<CompressOutlined />
<ContactsOutlined />
<ContainerOutlined />
<ControlOutlined />
<CopyrightCircleOutlined />
<CopyrightOutlined />
<CreditCardOutlined />
<CrownOutlined />
<CustomerServiceOutlined />
<DashboardOutlined />
<DatabaseOutlined />
<DeleteColumnOutlined />
<DeleteRowOutlined />
<DisconnectOutlined />
<DislikeOutlined />
<DollarCircleOutlined />
<DollarOutlined />
<DownloadOutlined />
<EllipsisOutlined />
<EnvironmentOutlined />
<EuroCircleOutlined />
<EuroOutlined />
<ExceptionOutlined />
<ExpandAltOutlined />
<ExpandOutlined />
<ExperimentOutlined />
<ExportOutlined />
<EyeOutlined />
<FieldBinaryOutlined />
<FieldNumberOutlined />
<FieldStringOutlined />
<DesktopOutlined />
<DingtalkOutlined />
<FileAddOutlined />
<FileDoneOutlined />
<FileExcelOutlined />
<FileExclamationOutlined />
<FileOutlined />
<FileImageOutlined />
<FileJpgOutlined />
<FileMarkdownOutlined />
<FilePdfOutlined />
<FilePptOutlined />
<FileProtectOutlined />
<FileSearchOutlined />
<FileSyncOutlined />
<FileTextOutlined />
<FileUnknownOutlined />
<FileWordOutlined />
<FilterOutlined />
<FireOutlined />
<FlagOutlined />
<FolderAddOutlined />
<FolderOutlined />
<FolderOpenOutlined />
<ForkOutlined />
<FormatPainterOutlined />
<FrownOutlined />
<FunctionOutlined />
<FunnelPlotOutlined />
<GatewayOutlined />
<GifOutlined />
<GiftOutlined />
<GlobalOutlined />
<GoldOutlined />
<GroupOutlined />
<HddOutlined />
<HeartOutlined />
<HistoryOutlined />
<HomeOutlined />
<HourglassOutlined />
<IdcardOutlined />
<ImportOutlined />
<InboxOutlined />
<InsertRowAboveOutlined />
<InsertRowBelowOutlined />
<InsertRowLeftOutlined />
<InsertRowRightOutlined />
<InsuranceOutlined />
<InteractionOutlined />
<KeyOutlined />
<LaptopOutlined />
<LayoutOutlined />
<LikeOutlined />
<LineOutlined />
<LinkOutlined />
<Loading3QuartersOutlined />
<LoadingOutlined />
<LockOutlined />
<MailOutlined />
<ManOutlined />
<MedicineBoxOutlined />
<MehOutlined />
<MenuOutlined />
<MergeCellsOutlined />
<MessageOutlined />
<MobileOutlined />
<MoneyCollectOutlined />
<MonitorOutlined />
<MoreOutlined />
<NodeCollapseOutlined />
<NodeExpandOutlined />
<NodeIndexOutlined />
<NotificationOutlined />
<NumberOutlined />
<PaperClipOutlined />
<PartitionOutlined />
<PayCircleOutlined />
<PercentageOutlined />
<PhoneOutlined />
<PictureOutlined />
<PoundCircleOutlined />
<PoundOutlined />
<PoweroffOutlined />
<PrinterOutlined />
<ProfileOutlined />
<ProjectOutlined />
<PropertySafetyOutlined />
<PullRequestOutlined />
<PushpinOutlined />
<QrcodeOutlined />
<ReadOutlined />
<ReconciliationOutlined />
<RedEnvelopeOutlined />
<ReloadOutlined />
<RestOutlined />
<RobotOutlined />
<RocketOutlined />
<SafetyCertificateOutlined />
<SafetyOutlined />
<ScanOutlined />
<ScheduleOutlined />
<SearchOutlined />
<SecurityScanOutlined />
<SelectOutlined />
<SendOutlined />
<SettingOutlined />
<ShakeOutlined />
<ShareAltOutlined />
<ShopOutlined />
<ShoppingCartOutlined />
<ShoppingOutlined />
<SisternodeOutlined />
<SkinOutlined />
<SmileOutlined />
<SolutionOutlined />
<SoundOutlined />
<SplitCellsOutlined />
<StarOutlined />
<SubnodeOutlined />
<SyncOutlined />
<TableOutlined />
<TabletOutlined />
<TagOutlined />
<TagsOutlined />
<TeamOutlined />
<ThunderboltOutlined />
<ToTopOutlined />
<ToolOutlined />
<TrademarkCircleOutlined />
<TrademarkOutlined />
<TransactionOutlined />
<TrophyOutlined />
<UngroupOutlined />
<UnlockOutlined />
<UploadOutlined />
<UsbOutlined />
<UserAddOutlined />
<UserDeleteOutlined />
<UserOutlined />
<UserSwitchOutlined />
<UsergroupAddOutlined />
<UsergroupDeleteOutlined />
<VideoCameraOutlined />
<WalletOutlined />
<WifiOutlined />
<BorderlessTableOutlined />
<WomanOutlined />
<BehanceOutlined />
<DropboxOutlined />
<DeploymentUnitOutlined />
<UpCircleOutlined />
<DownCircleOutlined />
<LeftCircleOutlined />
<RightCircleOutlined />
<UpSquareOutlined />
<DownSquareOutlined />
<LeftSquareOutlined />
<RightSquareOutlined />
<PlayCircleOutlined />
<QuestionCircleOutlined />
<PlusCircleOutlined />
<PlusSquareOutlined />
<MinusSquareOutlined />
<MinusCircleOutlined />
<InfoCircleOutlined />
<ExclamationCircleOutlined />
<CloseCircleOutlined />
<CloseSquareOutlined />
<CheckCircleOutlined />
<CheckSquareOutlined />
<ClockCircleOutlined />
<FormOutlined />
<DashOutlined />
<SmallDashOutlined />
<YoutubeOutlined />
<CodepenCircleOutlined />
<AliyunOutlined />
<PlusOutlined />
<LinkedinOutlined />
<AimOutlined />
<BugOutlined />
<CloudDownloadOutlined />
<CloudServerOutlined />
<CloudSyncOutlined />
<CloudUploadOutlined />
<CommentOutlined />
<ConsoleSqlOutlined />
<EyeInvisibleOutlined />
<FileGifOutlined />
<DeliveredProcedureOutlined />
<FieldTimeOutlined />
<FileZipOutlined />
<FolderViewOutlined />
<FundProjectionScreenOutlined />
<FundViewOutlined />
<MacCommandOutlined />
<PlaySquareOutlined />
<OneToOneOutlined />
<RotateLeftOutlined />
<RotateRightOutlined />
<SaveOutlined />
<SwitcherOutlined />
<TranslationOutlined />
<VerifiedOutlined />
<VideoCameraAddOutlined />
<WhatsAppOutlined />
{/*</Col>*/}
</Row>
);
}
Example #5
| Source File: Resource.tsx From datart with Apache License 2.0 | 4 votes |
|
Resource = memo(() => {
const t = useI18NPrefix('view.resource');
const dispatch = useDispatch();
const { editorCompletionItemProviderRef } = useContext(EditorContext);
const isDatabaseSchemaLoading = useSelector(selectDatabaseSchemaLoading);
const sourceId = useSelector<RootState>(state =>
selectCurrentEditingViewAttr(state, { name: 'sourceId' }),
) as string;
const databaseSchemas = useSelector(state =>
selectSourceDatabaseSchemas(state, { id: sourceId }),
);
const { height, ref: treeWrapperRef } = useResizeObserver({
refreshMode: 'debounce',
refreshRate: 200,
});
const buildTableNode = useCallback((database: DatabaseSchema) => {
const children =
database?.tables?.map(table => {
return buildTableColumnNode([database.dbName], table);
}) || [];
return buildAntdTreeNodeModel([], database.dbName, children, false);
}, []);
const buildTableColumnNode = (ancestors: string[] = [], table) => {
const children =
table?.columns?.map(column => {
return buildAntdTreeNodeModel(
ancestors.concat(table.tableName),
column?.name,
[],
true,
);
}) || [];
return buildAntdTreeNodeModel(ancestors, table.tableName, children, false);
};
const databaseTreeModel = useMemo(() => {
return (databaseSchemas || []).map(buildTableNode);
}, [buildTableNode, databaseSchemas]);
const { filteredData, onExpand, debouncedSearch, expandedRowKeys } =
useSearchAndExpand(
databaseTreeModel,
(keywords, data) => (data.title as string).includes(keywords),
DEFAULT_DEBOUNCE_WAIT,
true,
);
useEffect(() => {
if (databaseTreeModel && editorCompletionItemProviderRef) {
editorCompletionItemProviderRef.current?.dispose();
dispatch(
getEditorProvideCompletionItems({
sourceId,
resolve: getItem => {
editorCompletionItemProviderRef.current =
monaco.languages.registerCompletionItemProvider('sql', {
provideCompletionItems: getItem,
});
},
}),
);
}
}, [dispatch, sourceId, databaseTreeModel, editorCompletionItemProviderRef]);
const renderIcon = useCallback(({ value }) => {
if (Array.isArray(value)) {
switch (value.length) {
case 1:
return <DatabaseOutlined />;
case 2:
return <TableOutlined />;
}
} else {
switch (value.type as DataViewFieldType) {
case DataViewFieldType.STRING:
return <FieldStringOutlined />;
case DataViewFieldType.NUMERIC:
return <FieldNumberOutlined />;
case DataViewFieldType.DATE:
return <CalendarOutlined />;
}
}
}, []);
return (
<Container title="reference">
<Searchbar>
<Col span={24}>
<Input
prefix={<SearchOutlined className="icon" />}
placeholder={t('search')}
className="input"
bordered={false}
onChange={debouncedSearch}
/>
</Col>
</Searchbar>
<TreeWrapper ref={treeWrapperRef}>
<Tree
className="medium"
treeData={filteredData}
loading={isDatabaseSchemaLoading}
icon={renderIcon}
selectable={false}
defaultExpandedKeys={expandedRowKeys}
height={height}
onExpand={onExpand}
/>
</TreeWrapper>
</Container>
);
})
