RV
Reed Vogt

Prompt Manager - Copy this React, Tailwind Component to your project

Design a React component called AdvancedPromptList using the MUI X DataGrid component. The component should display a list of prompts with advanced features such as sorting, filtering, pagination, and in line editing. The DataGrid should be styled using Material UI's theme and custom styles where necessary. Component Requirements: Layout: The AdvancedPromptList component should occupy the full width of its parent container with a fixed height of 600px. The component should be wrapped in a Box component from Material UI to apply padding and background color. Inside the Box, include a Typography component at the top to display the title "Prompt List", styled as a h6 heading. Below the title, the DataGrid component should be positioned to fill the remaining space. DataGrid Configuration: Columns: Include columns for ID, Prompt, Category, Created Date, Last Modified, and Actions. ID: A non editable column displaying unique identifiers. Prompt: A text field column that can be edited in line. Category: A drop down select column with predefined categories (e.g., "General", "Technical", "Creative"). Created Date: A read only column displaying the date when the prompt was created. Last Modified: A read only column displaying the date when the prompt was last modified. Actions: A column containing buttons for editing and deleting the prompt. The Edit button should toggle in line editing for the Prompt and Category columns. The Delete button should open a confirmation dialog before removing the prompt. Functions: Sorting: Enable sorting on all columns except Actions. Filtering: Include filtering options for Category and Created Date columns. Pagination: Implement pagination with options for 10, 25, and 50 rows per page. In line Editing: Allow in line editing for Prompt and Category columns. Changes should be reflected immediately in the state and persisted using a savePrompt function passed as a prop. Delete Prompt: Implement a deletePrompt function that removes the prompt from the state and triggers a prop callback for external handling. Styles: Use Material UI's theme for primary and secondary colors. Apply custom styling to the DataGrid to increase row height for better readability. Style the Actions column buttons with icons and use a red color for the Delete button. Use a light grey background for the component’s container (Box), with rounded corners and subtle box shadow for a card like appearance. The Typography title should be aligned left with some padding and use the primary color of the theme. Props: data: An array of prompt objects, each containing id, prompt, category, createdDate, and lastModified. savePrompt: A callback function to save edited prompts. deletePrompt: A callback function to delete prompts. Accessibility: Ensure that the component is fully accessible, with proper ARIA labels for the DataGrid and buttons. Implement keyboard navigation for in line editing and actions. Responsiveness: The component should be responsive, adjusting the column widths and layout based on the screen size. On mobile screens, display fewer columns (e.g., hide Created Date and Last Modified by default) and provide a toggle option to view all columns. Expected Output: The AdvancedPromptList component should be a reusable, highly customizable component that fits seamlessly into any React application using Material UI. It should provide all necessary functionality for managing a list of prompts, with a clean and modern UI, and be easy to integrate with other components or backend services.

Prompt
Component Preview

About

PromptManager - A React component for managing prompts with sorting, filtering, pagination, and inline editing, built with react and t. View and copy code!

Share

Last updated 1 month ago