Often in projects there is a need to display some basic tables, for example a list of languages on the site, text labels, etc., they are often similar and have quite limited functionality. Writing the same logic every time is quite a thankless task, so I decided to write a component in Vue 3, which will allow to create such tables faster.

Goal:To build a Vue component that will allow quick output of content tables based on data from the database. The table should be generated automatically, from the transferred props. The component should be able to render basic fields such as date, text, images, etc. via parameter passing, with no additional manipulations.

Task #1: A Vue component that will render a table with pagination and search;

Task #2: The component should receive props for rendering fields with a field type that will specify how to render the value in the table;

Task #3: The component should be receiving props for rendering filters;

Task #4: The component should receive props that will allow adding action buttons to each row and calling a JS function when the button is clicked;

Task #5: Ability to edit or create records in the table;

Task #6: All table actions should be configurable only via props;

Task #7: The component should be able to accept a link that it will refer to for data or call save/edit. The backend should run in PHP based on the Laravel framework.