Create a Customized data grid React component

$100-400 CAD

Completed

Posted

5 months ago

$100-400 CAD

Paid on delivery

Create a custom data grid React component. It should look similar to the excal data table, but provide unique funtionalities as shown below. Please also provide detail document and instruction for how to use this component. 1. Our program will provide data in JSON to this component. It includes a list of elements, each element represents the details of a grid in the table. Including -id, The cell id will consists of a letter to stand for the table, column number and a row letter. For example A#02E. It means table A, row 02 and column E. Mandatory. -type (S: selectable/NS: non-selectable) The cell is selectable or not. Optional, default is S. -color (color code) The color to show as in the background for the cell. Mandatory. -content (letter, number, or any special characters) The letter to show in the cell, max two letters/numbers or other special characters. Optional -highlight(true/false) The grid should be shown as highlighted or not. Optional, default is false. -property, The property of the grid that will show in tooltip. Optional 2. Should be able to defind the table id (A-Z or AA-ZZ), range of row (1-99 or 1-999) in the code. The range of column (A-ZZ). The row number and the column number should be showed as header in UI similar as excel. Table ID show on top left corner on the table header. 3. Clicking on a selectable cell will highlight it on UI and return the selected cell id 4. User should be able to select multiple selectable cell at once (excel style selection), it should return the list of selected cell id. 5. Move the mouse over the cell should display the tooltip. 6. For the cell without any json provided, it should show as white color without border. 7. It should be possible to only update the cells that are changed. After the whole table is fully displayed, our program will only send one or multiple cell elements in JSON, so only the provided cell will be updated, the rest should remain the same. The whole UI should not need to reload each time for changes. 8. Should be able to define and show a backgound image of the table. Image URL, height and width can be set in code only and not changable by the user. Only need to display the table area the same size as the background image. The cells are not possible to go beyond the background image.

JavaScript

React.js

JSON

Project ID: 37579151

About the project

43 proposals

Remote project

Active 5 mos ago

Looking to make some money?

Email address

Benefits of bidding on Freelancer

Set your budget and timeframe

Get paid for your work

Outline your proposal

It's free to sign up and bid on jobs

Awarded to:

@suritaverma

Hello! My name is Surita and I am a Graphic Design professional with 5+ years of experience. I specialize in creating high quality designs that will meet your needs. I understand how important it is to have a custom data grid React component that looks similar to the excal data table but provides unique functionalities. Additionally, I can provide detailed documentation on how to use this component as well as any other services required for its successful implementation. I believe that my skillset makes me the perfect fit for this project. By using my knowledge of JavaScript, I can create a custom data grid React component that looks similar to the excal data table but provides unique functionalities such as selection, colorization, and more without reloading the UI each time. This would ensure that changes are immediately visible on the screen without requiring a full page reload.

$400 CAD in 5 days

5.0

(3 reviews)

3.2

43 freelancers are bidding on average $299 CAD for this job

@devops724

Hello there! My name is Hossein and I am a python and web development programmer with over 90 successful projects completed. I have extensive experience in fast and efficient JavaScript development as well as web development (including Python, Ruby, NodeJS and Java). I understand that you are looking for someone to create a customized data grid React component that looks similar to the excal data table but provides unique functionalities such as those listed above. Specifically, you are looking for someone who can provide documentation on how to use the component as well as detail instructions for how to use it. I believe that my skillset makes me the perfect fit for this project - specifically my expertise in JavaScript and web development along with my success in completing projects make me an excellent choice for this job. If you would like more information or any additional questions about my skills or services please don't hesitate to contact me directly!

$250 CAD in 7 days

5.0

(26 reviews)

6.8

@expertspk

I understand that you are looking for someone to create a customized data grid React component that looks similar to the Excel table but provides unique functionality. Specifically, you are looking for a component that allows you to define the table ID (A-Z or AA-ZZ), range of rows (0-99 or 0-999), and range of columns (0-99 or 0-999) so that the rows and columns can be displayed as header on the UI. Additionally, when a selectable grid is clicked, it should highlight the grid on the UI and return the selected grid ID. It should also be possible to select multiple selectable grids at once (excel style selection). After all of the grids have been loaded in the UI, only the provided grids should be updated, leaving the rest unchanged.

$250 CAD in 7 days

5.0

(29 reviews)

5.8

@durgesh8527

Hello there! My name is Pllavi, and I'm a full-time web and app developer working as a freelancer. With more than 10 years of experience in the field, I'm confident that I have the skills necessary to help you create the perfect data grid component. I understand that you're looking for someone to create a customized data grid React component that looks similar to the excal data table but provides unique functionalities. Specifically, you're looking for an element that can facilitate the display of grid content in a tooltip when the user moves their mouse over it, along with highlighting it on the UI when clicked. Additionally, user should be able to define the table ID (A-Z or AA-ZZ), range of row (0-99 or 0-999) and range of column (0-99 or 0-999) so they don't have to manually enter this information each time. Additionally, clicking on a selectable grid should return the selected grid ID list so they don't have to manually enter this information each time as well.

$250 CAD in 7 days

5.0

(14 reviews)

5.3

@solutionsplayers

As you have seen, your project is looking for someone to create a customized data grid React component. It should look similar to the excal data table but provide unique functionality. Specifically, we would like the component to have methods for displaying data in JSON format; color selection for cell backgrounds; highlight cells when moved over; cell properties that can be shown as tooltips; ability to define background images for tables; and the ability to only update cells that have been changed from the original JSON provided by our program. I am a professional web developer with more than 7 years of experience who has developed many web applications for different companies/clients. With my skillset, I believe I am the best fit for this project as I can deliver exactly what you are looking for in a customized data grid React component. I would be happy to discuss further how my services could be used to benefit your project should you choose me as the contractor of choice. Please feel free to contact me if you wish to discuss further or have any questions about my profile or services.

$400 CAD in 7 days

5.0

(9 reviews)

4.5

@REPLATechnology

Dear Client I am excited about the opportunity to develop a custom data grid React component that not only mirrors the functionality of the Excel data table but also introduces unique features tailored to your specific needs. My approach involves designing a highly customizable and user-friendly component, accompanied by comprehensive documentation for seamless integration and usage. The component will accept JSON data containing grid elements' details, including grid ID, type (selectable/non-selectable), color, content, border specifications, highlighting, and tooltip properties. Users will have the ability to define the table ID (A-Z or AA-ZZ), range of rows (0-99 or 0-999), and range of columns (0-99 or 0-999) as per their requirements. Clicking on a selectable grid will highlight it on the UI and return the selected grid ID. Users can select multiple selectable grids simultaneously in an Excel-style selection, and the component will return the list of selected grid IDs. The component will display tooltips upon mouse hover over the grids, showing relevant grid properties. Implementing a system to update only the changed grids received in JSON data, ensuring that the UI reflects changes without necessitating a full reload. The component will efficiently manage updates without disrupting the entire UI. I look forward to the possibility of collaborating closely on this endeavor. Warm regards

$500 CAD in 7 days

5.0

(8 reviews)

4.2

@MSaadJaved

Hi, Your job post for 'Create a Customized data grid React component' grabbed my attention instantly because it perfectly matches the skill set I work on. Having read the requirements carefully, I am sure I can complete your project very nicely. I have good expertise in JavaScript, React.js & that's why I believe I am a great fit for this job. Please review my portfolio here: https://www.freelancer.com/u/MSaadJaved If you find me suitable for this job, please initiate the chat so I can ask you few questions that will clear the things further. Sincerely, Saad Javed

$250 CAD in 3 days

5.0

(5 reviews)

3.8

@dharbour

Hello, I'm Anthony and I am a software developer with 10 years of experience in developing and testing web applications and machine learning algorithms. I have a lot of experience with React.js, JavaScript and with data analysis using Python and OpenCV. I understand what you are looking for in creating a customized data grid React component - a similar but unique functionality that provides unique funtions while keeping the look and feel of the excal table. I believe that my skillset makes me the perfect fit for this project: - I have expertise in React.js which will be required to create the necessary component; - My deep knowledge of Python and OpenCV will be invaluable when it comes to implementing the functionalities needed for the project; - My experience in developing web applications and machine learning algorithms will be an asset when it comes to understanding how to use the provided component for maximum efficiency; - My commitment to optimizing software design and researching new machine learning technologies make me an excellent choice for this job.

$250 CAD in 7 days

5.0

(4 reviews)

3.6

@MarkMemphis

Dear AntekCA, I prefer Canada clients. This project seems a piece of cake for me. I finished exactly the same work a month ago. I have deep experience on JavaScript, React.js Lets connect in chat so that We discuss further. Thank You

$190 CAD in 3 days

5.0

(4 reviews)

3.0

@ZubairKhan94049

I understand that you are looking for someone to create a customized data grid React component and I believe I am the perfect fit for this project. With over 15 years of experience in software development, I have developed a vast array of skills that will prove invaluable when working on this project. My expertise includes JavaScript, React.js, as well as other relevant technologies such as web development using the MERN Stack and mobile development using Flutter and Native technologies. I am confident that my skillset makes me the best choice for this project - specifically my knowledge of React.js and JavaScript which will be necessary to create the component exactly as described in the project description. My commitment to deadlines and accuracy is evident in my work -samples are available if needed- so you can rest assured that you will be getting top quality results within the expected timeline..

$250 CAD in 7 days

5.0

(2 reviews)

3.2

@zvinogrodskis

Hey , Good evening! I’ve carefully checked your requirements and really interested in this job. I’m full stack node.js developer working at large-scale apps as a lead developer with U.S. and European teams. I’m offering best quality and highest performance at lowest price. I can complete your project on time and your will experience great satisfaction with me. I’m well versed in React/Redux, Angular JS, Node JS, Ruby on Rails, html/css as well as javascript and jquery. I have rich experienced in React.js and JavaScript. For more information about me, please refer to my portfolios. I am checking your attachment, I'll update you shortly... I’m ready to discuss your project and start immediately. Looking forward to hearing you back and discussing all details.. Thank you

$100 CAD in 3 days

4.9

(5 reviews)

2.6

@elhadfi

Hi there, I'm an experienced React developer eager to take on the challenge of creating your custom data grid component. With a track record of delivering dynamic and efficient UI solutions, I'm confident in providing a tailored, well-documented, and timely solution. Let's discuss how I can bring your vision to life. Best,

$100 CAD in 3 days

4.4

(4 reviews)

3.0

@Eezereal

❤️-❤️ I am very happy that your project matches my skills -JavaScript and React.js - perfectly. As a seasoned ❤️-expert-❤️, over the years, I have successfully completed numerous projects in this field, gaining extensive experience and expertise. We are happy to discuss your project in detail. Please contact me for more details. thank you! ❤️-❤️

$275 CAD in 4 days

5.0

(1 review)

2.4

@alexandrsdombrov

Dear Client, This is Aleksandrs from Latvia, senior software developer. Since I have worked on similar projects and I've good experience in React.js. I believe that I'm the perfect person who can finish the project completely. Looking forward to chatting with you soon. Thanks and regards, Aleksandrs

$250 CAD in 3 days

5.0

(1 review)

2.0

@mikaelarhelger

Hey! Excited about crafting your custom React data grid component—it sounds like a dynamic project. I've got hands-on experience developing similar components and would love to chat about your specific design preferences. Have you thought about any specific color schemes or styling preferences for the grid? Also, regarding selectable grids, are there any additional functionalities you'd like to explore, such as custom actions upon selection? Let's connect for a deeper discussion on your unique requirements and how we can make this React data grid shine. Thanks!

$250 CAD in 2 days

1.2

(2 reviews)

3.5

@Betty235234

Hello there , Good evening! I’ve carefully checked your requirements and really interested in this job. I am a full-stack web developer with a wealth of experience and hands-on skills acquired over the course of 10 years of development. I’m offering best quality and highest performance at lowest price. I can complete your project on time and your will experience great satisfaction with me. I’m well versed in WordPress, Shopify, Magento, Larave, React/Redux, Angular JS, Node JS, Ruby on Rails, html/css as well as javascript and jquery. I have rich experienced in JavaScript and React.js. I’m ready to discuss your project and start immediately. Looking forward to hearing you back and discussing all details.. I await your immediate response Betty

$100 CAD in 2 days

0.0

(0 reviews)

0.0

@Eudes001

Dear Client , I hope this message finds you well. I want to express my enthusiasm for the opportunity to work on your project and deliver a customized products marketplace website that fulfills your vision. This is my final bid, and I genuinely believe that my skills and experience align perfectly with your requirements. I am committed to bringing your unique platform to life, empowering graphic designers to showcase and sell their creations seamlessly. Your project resonates with my passion for creative and functional web solutions, and I would genuinely appreciate the opportunity to collaborate with you. I am confident in my ability to deliver a user-friendly, feature-rich platform that exceeds your expectations. Thank you for considering my proposal. I look forward to the possibility of working together and bringing your vision to reality. Sincerely, Eudes Charles

$250 CAD in 7 days

0.0

(0 reviews)

0.0

@maviktik030

Hi, ! Having checked the job posting, I confirmed that you're looking for expert of React.js and JavaScript. After confirm your project "Create a Customized data grid React component", I think I have worked with similar projects so that I can provide you with a satisfied result. I am fully available to get started on your project immediately and you will find it interesting to discuss the project details. Regards

$280 CAD in 4 days

0.0

(0 reviews)

0.0

@StevenCromer25s3

Hi Mate , Good evening! I have carefully reviewed Create a Customized data grid React component. As a web developer, I have a strong understanding of HTML, CSS, JavaScript, and other programming languages. I have experience with responsive design, cross-browser compatibility, and user experience optimization. I am also well-versed in content management systems, including WordPress, Shopify, and Squarespace. In addition to my technical skills, I am an excellent communicator and collaborator. I am comfortable working with designers, project managers, and other stakeholders to ensure that the final product meets the client's needs and exceeds their expectations. Throughout my career, I have worked on a variety of projects, including e-commerce websites, portfolio websites, and web applications. I have a keen eye for detail and take pride in delivering high-quality work on time and within budget. I am excited about the opportunity to bring my skills and experience to your team and contribute to your company's success. Thank you for considering my application. I look forward to the opportunity to discuss how I can contribute to your company further. I’m ready to discuss your project and start immediately. Looking forward to hearing you back and discussing all details.. Thank you for your attention Steven

$100 CAD in 3 days

0.0

(0 reviews)

0.0

@nataliahapuk1

Dear Client, This is Natalia from Ukraine. Since I have worked on similar projects and I am super-familiar with React.js and JavaScript. I believe that I'm the perfect person who can finish the project completely. Please contact me for further discussion and let's get started! Thanks and regards, Natalia

$280 CAD in 2 days

0.0

(0 reviews)

0.0

@Myroslava51

Greetings! Dear , How are you? This is Milla from Ukraine. I am a candidate for your project. i have just read your proposal and understand the requirements. I’m a PRO JavaScript and React.js Expert with over 7 years of experience in web programming. I can start the work immediately. Client satisfaction is my pride and goal. I hope to make another perfect result with an excellent client. Sincerely, Milla

$280 CAD in 3 days